使用rem进行移动端布局

前言

使用rem前你需要了解的几个小东西
1.物理像素(physical pixel)
我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。
2.逻辑像素
是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。
3.设备的像素比(device pixel ratio)简称DPR（DPR = 物理像素 / 逻辑像素）
它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：

---

所以，这个时候就知道了，为什么在pc上设置font-size=12px,非常正常。而在移动端就变得非常小了，是因为DPR这二货造成的~~
我们电脑的DPR是1，而移动端不是1，ios相对来说规范很多，iphone5,6都是2，6p是3。安卓的就玩得比较high了，各种DPR,当然你可以自己来查看设备DPR

DPR=window.devicePixelRatio

rem介绍

rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。
假设根元素的字体大小是100px, 则3rem的大小为 3*100=300px

html{
    font-size: 10px;
}
div{
    width: 3rem; /* 3*10 = 30px;*/
    margin: 2rem;
}

解决方法

1.css(媒体查询)

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
 
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
 
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}
 
@media screen and (min-width: 440px) {
    html {font-size: 20px;}
}
 
@media screen and (min-width: 480px) {
    html {font-size: 22px;}
}
 
@media screen and (min-width: 640px) {
    html {font-size: 28px;}
}

2.根据不同的设备宽度在根元素上,使用js动态设置font-size
为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为 宽度为 640px 的设计稿中的 100px。代码如下

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;

                   //width:iphone5=320,iphone=375,ipad=768
        if (width > 640) { // 最大宽度,可以根据自己的需要来设置
            width = 640;
        }
        var rem = width / 6.4; //(设计稿640px/100px)即：在320（iphone5)/6.4=50
        docEl.style.fontSize = rem + 'px';  //根字体 为50px
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window);

还有一种方法会根据 devicePixelRatio 设定 initial-scale 来放大 viewport，使页面按照物理像素渲染，提升清晰度。