移动端布局方案 rem vw

移动端布局方案 rem 示例

[ 方法1 ]

在谷歌浏览器中，打开任意模仿IPHONE的设备尺寸，查看body的宽度
将如下JS代码中pageW设置为上一步骤body的layout渲染宽度布
将PSD等比缩放/拉伸到改尺寸
安装PSD中尺寸正常测量布局px宽度, 并且在后续，将测量PX转化为REM，比例为 100px = 1rem
注意添加meta标签，对缩放禁止

(function (doc, win) {
        var pageW = 980;
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=pageW){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / pageW) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

模板:

<!DOCTYPE html>
<html lang="en">
<head> 
 <meta charset="UTF-8">  
 <meta name="viewport" content="user-scalable=no">  
<script>   
(function (doc, win) {
            var pageW = 980; 
            var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=pageW){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / pageW) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script> 
 /*你引进的资源*/
<title>标题</title> 
</head>
<body>
 /*你的代码*/
</body>
</html>

[ 方法2 ] - 网络参照 [ 小米官网 ]

i的参数设置为PSD设计稿实际尺寸，如下面例子中，PSD设计稿假设为720
正常测量PX，然后按照100px = 1rem的比例计算
因为设置了meta的 width=device-width 所以不用考虑其他因素了
代码：

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;
             if(n>720){ n=720 };
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

模板[ REM ]

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script>
    //小米官网的写法
    !function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;
             if(n>720){ n=720 };
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
  }(window);
    </script>
    <style>
    body { margin:0;}
        .wrap{position:absolute;top:0;left:0;bottom:0;right:0;background:#fefefe;}
        .title{width:100%;height:0.98rem;line-height:0.98rem;color:#fff;background:#e02222;text-align: center;font-size:0.32rem;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="title">首页</div>
    </div>
</body>
</html>

[ 方法三]

js会动态添加meta，以及html的font-size,并且改变他们在不同设备下的数值
需要借助谷歌浏览器模拟任意iphone尺寸设备，测量body的宽度，
将PSD设计稿等比调整至改值
例：如下
在IPHONEX设备模拟下，body宽度为1125，将其分为45份，每份为25，则该尺寸下html的font-size为25
当然为了方便计算，可以将此数值改为 11.25份，每份为100，则该尺寸下html的font-size为100

;(function(){
    function setViewport(){
        //获取像素比 - window.devicePixelRatio
        var dpr = 1 / window.devicePixelRatio;
        if(!document.getElementById('viewPortMeta')){
            var oMeta = document.createElement('meta');
            oMeta.name = "viewport";
            oMeta.id = "viewPortMeta";
            oMeta.content = "width=device-width,user-scalable=no,initial-scale="+dpr+",minimum-scale="+dpr+",maximum-scale="+dpr;
            document.getElementsByTagName('head')[0].appendChild(oMeta);        
        }
        var fz = document.documentElement.clientWidth / 45; 
        /*25*/
        document.getElementsByTagName('html')[0].style.fontSize = fz + 'px';
    }
    setViewport();
    
    //resize
    if(window.orientation){
        window.addEventListener('orientationchange',function(){
            setViewport();  
        },false);
    }else{
        window.addEventListener('resize',function(){
            setViewport();  
        },false);
    }   
})();

模板中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>

<body>
    正文
</body>
</html>
<script type="text/javascript" src="js/viewport.js"></script>

区别优劣？

上面2个方法，

方法一，借助浏览器模拟IPHONE任意设备宽度，测量BODY渲染宽度，将PSD设计稿等比拉为此宽度，并且将JS中pageW修改为该值；换算 [ 100px = 1rem ]
【注】：微信浏览器部分标签因为结构嵌套过于靠外，dom load 第一次渲染错误，orientationchange 触发会正常

可以修改结构，靠外元素需要单独嵌套1层，另外，最外面盒子需要添加rem为单位的宽度

方法二，只需要考虑设计稿，根据设计稿宽度设置脚本参数，HTML的 head中添加一段默认meta设置；换算 [ 100px = 1rem ]
方法三，借助浏览器模拟IPHONE任意设备宽度，测量BODY渲染宽度，将PSD设计稿等比拉为此宽度，人为设置HTML划分多少份，计算html的font-size值以便后续计算；
如上例子中，1125宽度，45份，每份为25 ，则换算需要根据实际情况 [ 25px = 1rem ]
【注】：部分安卓机器需要测试兼容性

法1会好一些，方便计算

将chrome切换移动端任意尺寸手机型号，查看computed的body宽度，
将PSD等比调整至此宽度，
将JS脚本中的pageW参数设置为改尺寸宽度，
最后进行切图，以及PX和REM转换
添加禁止缩放

<meta name="viewport" content="user-scalable=no">

方法1存在的问题

渲染问题，页面加载后有一个变化的过程，目力可见，不友好
解决方法：

将改变font-size脚本提到head标签内，在读取页面结构中，提前计算字体大小
将body隐藏，计算完font-size后，再显示body，使用visibility来做这个隐藏操作
行内块级元素，上下有空白高度，设置这个容器 font-size为0即可
在chrome模拟器上看没问题，真机出现字体首次渲染不到位，但是通过渲染手机横屏触发了二次渲染正常的话，需要在这个首次渲染问题的标签父级，增加font-size:0 即可
通过rem方式来布局，body上面必须要设置一个font-size, 例如: font-size:14px;或font-size:16px; 当然也可以使用rem

B站的移动端布局方案

传统html设置字体，通过rem调整页面layout尺寸

var docEl = document.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var visibleRatio = 0.72;

//设置html标签字体
var recalc = function () {
  var clientWidth = docEl.clientWidth;
  var clientHeight = docEl.clientHeight;
  if (!clientWidth) {
      return;
  };
  if (clientWidth >= 750) {
    if (clientWidth / clientHeight < visibleRatio) {
      docEl.style.fontSize = '100px';
    } else {
      //宽度大于750且宽高比大于0.72，那么让宽度等于高度的0.72
      var w = visibleRatio * clientHeight;
      docEl.style.fontSize = 100 * (w / 750) + 'px';
    }
  }else {
    //常规移动端，html字号 750宽 = 100px ，适配设备的宽*100/750 = 当前字号
    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
  }
};
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

[ 最简洁方案VW布局]

VW结合REM布局

节省了常规通过计算视窗变化，重新计算HTML上font-size设置值的过程，一劳永逸
直接设置 html { font-size:26.6667vw; }
26.6667的由来，iPhone6\7\8 宽度为375px 一屏幕宽为100vw，如果求1px等于多少vw
便可以计算得知 1px100vw/375px = 0.266667vw ;
那么如果设置字体大小为100px = 1000.266667vw = 26.6667vw
而在iPhone6plus/7plus/8plus/时候，宽度为414px 乘以0.26667vw 可得110px，这与iphone6/7/8的100px 是等比变化的
如：
375/414 = 100/110 ；这样就做到了vw一劳永逸的目的
将PSD调整为375进行PX布局，通过VsCode插件 px2rem配置基础font-size为100
圈选px样式部分，通过快捷键crtil+Z一次性调整为rem单位
注意为body设置基础px值，防止页面渲染问题
body上的font-size主要是针对字体的，html上的font-size主要是针对布局的

最终代码：

html { font-size:26.666667vw;}
body {font-size:16px;} 

/*布局代码区域*/
设计图以iphone6/7/8 375尺寸为准，直接量取px即可，
后续通过VScode工具(px to rem)设置好参数 Number of pixels per 1rem项目为100
然后圈选CSS样式alt+z即可完成转化工作

移动端布局方案 rem vw

移动端布局方案 rem 示例

[ 方法1 ]

[ 方法2 ] - 网络参照 [ 小米官网 ]

模板[ REM ]

[ 方法三]

模板中

区别优劣？

法1会好一些，方便计算

方法1存在的问题

B站 的移动端布局方案

[ 最简洁方案VW布局]

推荐阅读更多精彩内容

B站的移动端布局方案