一看就懂得移动端rem布局、rem如何换算

这里使用了js控制根元素的font-size大小，然后进行rem换算，在js代码后面会说明以下问题。

1.如何进行rem运算？

2.如果纯js控制根元素用rem布局会出现的小问题，如何解决？

3.如有欠缺的地方，大神们可以指出错误或者改进。

function intiSize(){
    //获取当前浏览器窗口宽度(这里的实质就是body宽度)
    var win_w=document.body.offsetWidth;
    //定义变量
    var fontSize;
    if(win_w>640){
        fontSize=24;
    }else{
        //如果浏览器窗口宽度(这里的实质就是body宽度)值小于320，取320
        win_w=Math.max(320,win_w);
        fontSize=win_w/320*12
    }
    //设置根元素的大小
    document.getElementsByTagName('html')[0].style.fontSize=fontSize+'px';
}
//浏览器窗口宽度发生变化时条用这个函数，方便与改变窗口大小时候调试
onresize=intiSize;
intiSize();

1.这段代码是基于640px的设计稿，基于640设计说明（明白了640怎么换算，720设计稿原理一样，替换以下JS代码里面的数字或者用传参的方式调用函数）

假设我们拿到一张640的设计稿，有一个div宽度为200px，高度100px；你在640的页面去布局时，因为根元素取24px，把width值转换为rem可以直接用设计稿div的宽度除以24，200/24rem=8.33333333rem（当然是除不尽的，精确度建议保留8个小数点），而同理，高度height=100/24rem=4.16666667rem，这样布局可以很精确还原设计稿，当然最后推荐使用计算器。

2.纯js控制会一个页面加载时候，知道加载完毕会出现由大变小的问题，这个是因为先加载页面然后再加载js，当没加载完这段js，函数没被调用，会出现很大字体或者图片很大，等JS加载完毕后，瞬间变回正常，这样会影响用户体验，这里有两个解决方法，

一、像淘宝移动端那样，页面没加载完毕前显示一个loading页面，加载完毕后再显示内容。

二、把加入一个css媒体查询样式表，页面先加载样式再加载内容，用css样式表去控制你的页面布局和js精确控制的布局偏差尽量降低到最小，这样加载完时候因为微小偏差的还原到精确的布局，这时候发生的变化非常微小（只有一个px左右的偏差）肉眼很难以看出（亲测实用），下面我贴出平时实用的css样式表，两张混合实用，移动端布局的问题得以完美的解决。

@charset "utf-8";
/* CSS Document */

/* ---------- Responsive accurate ---------- */
@media (min-640px){
    html{font-size:24px;}
    }
}
@media (min-631px) and (max-639px){html{font-size:23.66px;}}
@media (min-622px) and (max-630px){html{font-size:23.33px;}}
@media (min-613px) and (max-621px){html{font-size:23px;}}
@media (min-604px) and (max-612px){html{font-size:22.66px;}}
@media (min-595px) and (max-603px){html{font-size:22.33px;}}
@media (min-586px) and (max-594px){html{font-size:22px;}}
@media (min-577px) and (max-585px){html{font-size:21.66px;}}
@media (min-568px) and (max-576px){html{font-size:21.33px;}}
@media (min-559px) and (max-567px){html{font-size:21px;}}
@media (min-550px) and (max-558px){html{font-size:20.66px;}}
@media (min-541px) and (max-549px){html{font-size:20.33px;}}
@media (min-533px) and (max-540px){html{font-size:20px;}}
@media (min-524px) and (max-532px){html{font-size:19.66px;}}
@media (min-515px) and (max-523px){html{font-size:19.33px;}}
@media (min-506px) and (max-514px){html{font-size:19px;}}
@media (min-497px) and (max-505px){html{font-size:18.66px;}}
@media (min-488px) and (max-496px){html{font-size:18.33px;}}
@media (min-480px) and (max-487px){html{font-size:18px;}}
@media (min-471px) and (max-479px){html{font-size:17.66px;}}
@media (min-462px) and (max-470px){html{font-size:17.33px;}}
@media (min-453px) and (max-461px){html{font-size:17px;}}
@media (min-444px) and (max-452px){html{font-size:16.66px;}}
@media (min-435px) and (max-443px){html{font-size:16.33px;}}
@media (min-426px) and (max-434px){html{font-size:16px;}}
@media (min-417px) and (max-425px){html{font-size:15.66px;}}
@media (min-408px) and (max-416px){html{font-size:15.33px;}}
@media (min-400px) and (max-407px){html{font-size:15px;}}
@media (min-391px) and (max-399px){html{font-size:14.66px;}}
@media (min-382px) and (max-390px){html{font-size:14.33px;}}
@media (min-374px) and (max-381px){html{font-size:14px;}}
@media (min-365px) and (max-373px){html{font-size:13.66px;}}
@media (min-356px) and (max-364px){html{font-size:13.33px;}}
@media (min-347px) and (max-355px){html{font-size:13px;}}
@media (min-338px) and (max-346px){html{font-size:12.66px;}}
@media (min-329px) and (max-337px){html{font-size:12.44px;}}
@media (max-328px){html{font-size:12px;}}

3.如果有更加多好的想法和建议，留下你的评论，让更加多人看到移动端布局应该怎么去改进，指出不足之处，我会加以改进并说明~

4.最后：或者这里换算有些麻烦，要用计算机器去计算，当然，当你掌握了这种布局方式，移动布局会用的很爽！

 

 

标签: 移动端布局, rem, rem换算, rem布局