REM方案

rem是如何实现自适应布局的？

摘要：rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。

rem是什么？

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

rem是一个相对单位，1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小，就可以改变rem所代表的大小。这样我们就有了一个可控的统一参考系。我们现在有两个目标：
rem单位所代表的尺寸大小和屏幕宽度成正比，也就是设置html元素的font-size和屏幕宽度成正比
rem单位和px单位很容易进行换算，方便我们按照标注稿写css
这里有一个前提，无论是设置html的font-size和屏幕宽度成正比，还是换算单位，我们都是以我们的标注稿为参考的。移动端的标注稿一般是640px(iphone5)或者750px(iphone6/7/8),现在750px用的比较多一些，我们假设标注稿是750px的。这里的750px是指设备的实际尺寸，也是UI标注稿的实际尺寸。而我们编码写的px是指css尺寸，是设备无关的尺寸，css尺寸和屏幕实际尺寸不是1比1的映射关系，而是取决于屏幕的像素密度。比如iphoneX是3倍屏，iphone8是2倍屏，但是两个的屏幕css尺寸都是375px。而实际的设备尺寸，iphonex是1125px，iphone8是750px，我们编码过程中只需要设置css尺寸，设备会自动帮我们映射实际的尺寸。我们按照标注稿写完页面之后，页面应该是可以在其他所有尺寸设备上正常自适应地显示的。

为什么web app要使用rem？

这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。

rem能等比例适配所有屏幕

html {
	font-size: 100px;
}


 ~ function () {
      let evt = 'onorientationchange' in window ? 'orientationchange' : 'resize';

      function computed() {
        let HTML = document.documentElement,
          deviceW = HTML.clientWidth,
          designW = 750,
//DPR(devicePixelRatio) 设备像素比=物理像素（设备像素）/逻辑像素（CSS像素），这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素
// 这里的100是在基础样式中设置的html的根元素font-size=100px.100px=1rem.
// 通过JS去动态计算根元素的font-size，这样的好处是所有设备分辨率都能兼容适配
          ratio = deviceW / designW * 100;
        if (deviceW >= designW) ratio = 100;
        HTML.style.fontSize = ratio + 'px';
      }
      computed();
      window.addEventListener(evt, computed);
    }();

H5自适应改造方案——rem方案

原理

之前我们H5页面使用的方案是设置viewport meta头，让浏览器帮我们把页面缩放，使得页面看起来好像是自适应。实际上这不是自适应，只是在中小屏设备上，看起来差距不大，问题不明显而已。

现在大屏高清设备流行，自适应的问题也越来越明显了。在大屏设备上，课程封面小，title被拉长，文字小，按钮扁等问题越来越突出，已经达到不能忍受的程度，因此需要一套自适应的方案。

页面缩放

在viewport meta头里，取消让浏览器自动缩放页面，页面的自适应由页面自身管理。
因为有dpr的问题，为了统一管理，让浏览器帮我们根据dpr缩小页面，比如dpr=2，就缩小0.5让页面统一处在dpr=1的环境中。

rem

rem是一个半相对单位，它相对的是html(或body)元素的font-size值，例如有html { font-size: 10px; }，则1rem = 10px。

当html元素的font-size是根据设备宽度自适应时，使用rem的页面也就会有自适应的特性。

文字

根据以下两个原因，对于文字使用px：

在大屏设备希望看到更多的文字
中文点阵最好是在12px，14px，16px这种尺寸，使用rem就会无法避免使用13px，15px尺寸，这样文字会显示的很奇怪
没有浏览器帮助我们缩放页面，在高清设备里面需要我们手动对文字进行缩放，为了方便这个而不需要写media query，页面在计算html的font-size值的同时，会设置一个data-dpr的属性。这时文字的media query就可以这样写：

p { font-size: 12px; } /* dpr = 1 /
[data-dpr=“2”] p { font-size: 24px; } / dpr = 2 /
[data-dpr=“3”] p { font-size: 36px; } / dpr = 3 */
规范
在head头引入初始化js脚本，可以使用两种代码：

淘宝移动端自适应方案开源代码，注：这里的因子是10，即font-size = W/10