移动端布局 rem,和px

最新推荐文章于 2021-08-02 18:01:37 发布

weixin_30344131

最新推荐文章于 2021-08-02 18:01:37 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：http://www.cnblogs.com/xianxianxxx/p/7851131.html

本文介绍两种常见的移动端网页布局方法：REM布局和360布局。REM布局通过动态设置根元素字体大小实现响应式设计，而360布局则是将屏幕宽度固定为360像素进行缩放，确保页面元素在不同设备上的一致显示。

1.rem布局，根据屏幕来计算rem,也就是意义上的适应屏幕，但是一些字体大小转换和计算有些复杂。

// rem 布局重定义
(function(){
    $('html').css('font-size', ($(window).width() - 2) / 10);
    var multiple = parseFloat($('html').css('font-size')) / ($(window).width() - 2) * 100;
    if(multiple != 10){
        $('html').css('font-size', ($(window).width() - 2) / multiple);
    }
    document.write('<meta name = "format-detection" content = "telephone=no">');
})();

2.360布局就是说把屏幕按照360的尺寸自动放大缩小，这样用px就可以兼容所有手机了。

(function (window, document, width) {
　　var content = "user-scalable=no,width=" + width;
　　if( window.PhoneSystem.name == "Android" && window.parseInt(window.PhoneSystem.version[0]) <= 4 && window.parseInt(window.PhoneSystem.version[1]) < 5) {
　　　　content += ",target-densitydpi=device-dpi";
　　}
　　content += ",initial-scale=" + window.screen.width / width;
　　content += ",minimum-scale=" + window.screen.width / width;
　　content += ",maximum-scale=" + window.screen.width / width;
　　var meta = document.createElement("meta");
　　meta.setAttribute("name", "viewport");
　　meta.setAttribute("content", content);
　　var head = document.getElementsByTagName("head")[0];
　　head.insertBefore(meta, document.getElementsByTagName("meta")[0]);
})(window, document, 360);

转载于:https://www.cnblogs.com/xianxianxxx/p/7851131.html