理论知识铺垫：

rem是什么？
rem（font size of the root element）是指相对于根元素（ <html>元素）的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。

总的来说，在做项目时，rem布局可分为俩种情况无设计稿和有设计稿：

一、“无设计稿”情况下

1、首先需要在<head>标签中加入

<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">

对于viewport的详细解释可以参考这篇文章：https://www.cnblogs.com/2050/p/3877280.html

2、在<script>标签中加入以下代码：

window.onresize = function(){
  document.documentElement.style.fontSize = document.documentElement.offsetWidth / 20 +'px';
}
/*
document.documentElement.style.fontSize 是得到<html>标签并为它设置font-size样式字体大小，
因为rem计算的规则是依赖根元素也就是<html>元素的字体大小
document.documentElement.offsetWidth  是获取整个视口(viewport)的宽度
*/

代码解释：
document.documentElement.offsetWidth / 20 这里的20不是固定的，这里 / 20 是把屏幕均分为20份，当然也可使用16、18... , 但是这里有一个问题就是Chorme浏览器字体最小只能为12px，所以这里的最后结果（document.documentElement.offsetWidth / 20 = ？）最好别小于12。

3、尝试让一个div不管在什么屏幕下都占据一半，这里使用20均分所以这里div宽度只需要定位10rem就可以在任何屏幕下都占据一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无设计稿rem</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>

<div style="width:10rem; height:100%; background:skyblue;"> 
    <a href="http://www.yxphp.cn">亿鑫科技 yxphp.cn</a>
</div>

<script>
    window.onresize = getRem;
    function getRem(){
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 20+'px';
    }
    getRem();
</script>
</body>
</html>

iphone5 设备调试信息截图

iphone6/7/8 设备调试信息截图

二、“有计稿”情况下

我们以 iPhone5 和 iPhone6/7/8 举例他们的屏幕分辨率是320px568px，375px667px
视觉设计师给的平面稿一般是 640px ， 750px 宽度的设计稿。
为什么设计稿会屏幕比例的俩倍呢？
这里又引出一个理论知识点 —— DPR：

dpr是什么？
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
物理像素，比较好理解，一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
dips，（dip或dp或device independent pixels）指的是设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的
详细解释：https://www.cnblogs.com/mtl-key/p/7126634.html

简单的讲其实就是dpr决定了css 1px 等于多少屏幕物理像素。

拿 iPhone6 和普通PC机举例：
iPhone6的dpr等于2，也就是说如果你为一个容器div设置100px（这里100px是css像素）宽度，在iPhone6 屏幕上面div其实占据了200px物理像素（因为iPhone 6 下 dpr=2）。而在普通pc屏幕下这个div占据的刚好是100px（因为pc屏幕下dpr=1）

可以在Chorme移动端DEBUG下开启显示dpr，也可以在console中打印window.devicePixelRatio查看

谷歌浏览器设置显示DPR 设置

谷歌浏览器设置移除DPR显示设置

设计稿给的是 640px 的如下：

640px设计稿

通过rem布局实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有设计稿rem</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div style="position:absolute;left:0.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;right:0.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;left:2.7rem;top:3.38rem;width:1rem;height:1rem;background:#00f;"></div>
<script>
    window.onresize = getRem;
    function getRem(){
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 6.4+'px';
    }
    getRem();
</script>
</body>
</html>

在任何设备下这三个div都会和设计稿一样的布局展现。

 document.documentElement.offsetWidth / 6.4

这里 / 6.4是为了方便计算（640 / 100 = 6.4），当然 / 80，/ 50 都行；

有一个问题就是Chorme浏览器字体最小只能为12px，所以这里的最后结果最好别小于12。

所以这里设置设计稿宽度640 / 100 之后等于 6.4

document.documentElement.offsetWidth / ( 640 / 100)

<div style="position:absolute;left:0.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;right:0.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;left:2.7rem;top:3.38rem;width:1rem;height:1rem;background:#00f;"></div>

容器div的单位只要跟随 / 100 进行方便的计算得出就行了，因为 / 100 很好计算所以无需思考直接就能得出想要的rem大小，也是众多web前端开发人员最热衷的用法之一。

关于移动端项目rem适配必须掌握的开发思路

关于移动端项目rem适配必须掌握的开发思路

一、“无设计稿”情况下

二、“有计稿”情况下