动态 REM

设备像素(device pixel): 设备像素是物理概念，指的是设备中使用的物理像素。 比如iPhone 5的分辨率640 x 1136px。
CSS像素(css pixel): CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。 在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
设备像素缩放比(device pixel ratio)：
1px = (dpr)2

• dp
  比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。
  参考链接： 前端工程师需要明白的「像素」 需要先弄清楚设备像素比了再往下看
  动态 REM(仅以手机为例)
  淘宝在用的手机页面方案（不是响应式方案） REM
  是基于根元素html{font-zise： pageWidth;}
  pageWidth
  是页面的宽度,可以通过这个API
  获取到document.documentElement.clientWidth
  也就是说让1rem–>pageWidth，div{width: 0.5rem},div{font-size: 0.05rem;} 下面是构造的代码
  

hello world

打开控制台看到下面截图中的，构造成功

title

上CSS代码
*{margin: 0; padding: 0;}

.half{

width: 0.5rem;

height: 0.5rem;

background: red;

}

.full{

width: 1rem;

height: 1rem;

background: blue;

}

在电脑上面查看时，会看到宽度会存在一些差异；造成这样的原因是滚动条，它是html的，而不是body的,暂时还没有想到能获取不包含滚动条的方法 在手机上面是不会有滚动条出现的，滚动条是自己感知的
如果手机页面的宽度定为640px，字体是32px，换算成rem，32/640 =0.05rem 有点繁琐，能不能让640rem–>100%? 假设 1rem –> 1000px(屏幕宽度) 640rem –> 1000px; ==> 1rem –> 1000/640
html

hello world

css
.full{

width: 640rem;

height: 640rem;

background: blue;

font-size: 32rem;

}

js

运行之后会在页面下方看到有滚动条出现

title

.full
的宽度达到了7680px 。。。

title

html
里面的font-size

小于12px

title

结论： 1. 在PC上面浏览器默认字体大小是12px,若小于12px会自动提升到12px； 2. PC上 1rem 的值不要小于12px ，手机上面不会有这样的限制
解决方案： 只要让 1rem >= 12px 就行了 把这段代码少除以一个10，相应的css代码也一样
var content = 'html{font-size:'+pageWidth/640+'px;}'

若还是小于则再除以一个2 对于程序员而言16是个整数，2^4 除以什么数和设计稿有关，若是720px，除以的数最好可以和720有关

hello world hello world hello world

hello world hello world hello world

//css代码

*{margin: 0; padding: 0;box-sizing:border-box;}

.half{

width: 8rem;

height: 4rem;

background: red;

border: 1px solid black;

float: left;

}

/*

*推理

*16rem-->100%

*8rem-->50%

*所以在任何设备上刷新都可以看到.half占页面宽度的一半

*/

完整代码展示
为了解决rem在进行单位换算上的麻烦问题，设置html字体大小为font-size:62.5%，默认字体大小是16px， 即是16px*62.5%=10px；1rem=10px； 比如1.2rem=12px,1.4rem=14px,1.6rem=16px.