本文主要是对Rem介绍与小结。
学习与参考了以下文章：
Rem是什么？
Rem是一个相对单位,依照html元素的字体大小进行比例,类似的还有em（相对与它的父级进行比例），vh、vw、vmin、vmax（相对与视窗高、宽、最小、最大进行计算）简单的来说，一个视窗为100vw，1vw = 1%;
Rem我能拿来做什么？
Rem适合用来制作移动端webApp对于各种不同分辨率的适配问题上可以选用Rem，在对各种分辨率的移动端也可谓是完美兼容。Rem由于相对与html的字体大小进行比例的,这样就比百分比和em布局相对来说更加方便了。如今手机分辨率各有不同，在各种手机上又不能仅仅用响应式布局的@media来进行适配这样对程序员太不友好，工作量大。
Rem下如何实现1像素？
进行比例的rem在设备上往往做不到1像素线条，该如何解决呢？可以通过判断dpr的比例然后对transform的scale进行比例的设置。
//stylus下制作了一个mixin
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
.border-1px{
&::after{
-webkit-transform:scaleY(0.7);
transform: scaleY(0.7);
}
}
}
为什么在头部设置mate也做到自适应为啥还要用REM？
在一部分像素比差不多的手机上看似适应，换到大屏高清设备上自适应的问题就会逐渐显现。如今手机型号众多，屏幕像素不一罪魁祸首就是dpr。然而之所与会自适应是因为Viewport它通过缩放。
什么是DPI和PPI？
DPI与PPI都是表示单位英寸中像素密度。DPI主要用印刷行业每英寸的墨汁点，PPI主要用于屏幕，指每英寸像素密度。ppi越高像素越高，图片越清晰。
ppi对比
什么是Retine高清屏？
在接触淘宝flexible后会有个retine高清屏方案，Retine高清屏是dpr大于等于2的都称为高清屏。
什么是像素？
想了解像素比需要先了解像素。像素分为物理像素和逻辑像素（也可以称作css像素）。物理像素是设备的像素,逻辑像素是开发者抽象出来的像素，通俗比喻一下：逻辑像素是固定的1px,你的屏幕像素多大逻辑像素就多大，但是设备的像素又不一样大，所以就会进行缩放或者放大。如下图所示。上面模拟器显示的就是逻辑像素，下面的所说的是物理像素。为什么不一样呢？其原因是像素比。375x667的两倍就是1334x750。说明了dpr为2。
iPhone6参数
什么是像素比？
像素比（dpr） = 物理像素 / 逻辑像素（CSS像素）；早期没有这个概念，当时iphone4出了后有个叫做视网膜屏的时候当时也不懂，觉得老牛了，后来知道是视网膜屏ppi大于320说人眼看不到像素点。其实也就是dpr大于等于2。
Rem兼容性？
在兼容IE上面最少也要IE8以上，这样更加证明了在做移动端webApp上是完全不用担心兼容的，所以现在rem在大多都是用来制作webApp。
如何使用Rem？
lv1：自己手动设置html的font-size然后根据设置的大小对后面的布局进行设置，这样过于麻烦也不能做到适配。
lv2:利用JS来获取屏幕大小然后根据屏幕来设置html的font-size,利用js加载有弊端，屏幕会跳一下，可以使用一个londing来等屏幕加载完后在显示，显然这样的效果也不是很好。
//这个代码有缺陷也没做兼容，主要意思还是js动态设置html的字体大小
(function (){
size();
window.onsize = function(){
size();
}
function size(){
var winW = document.documentElement.clientWidth || document.body.clientWidth;
// 这里主要是把屏幕大小分成10份
document.documentElement.style.fontSize = winW/10 + "px";
}
})();
lv3:使用JS动态设置html的font-size和meta，给<html>元素添加data-dpr属性，并且动态改写data-dpr的值也就是淘宝的flexible的思想。
//flexible实际上就是能过JS来动态改写meta标签，代码类似这样
var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
如何使用flexible？
github上下载flexible然后引入。目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。假设设计图为750px。
1a = 7.5px
1rem = 75px
我想把加入购物车按钮用rem来设置，宽为150，高为48;rem宽为2rem高为0.64rem；
使用flexible的注意事项？
官方建议字体不要设置rem，用px来进行设置。
//官方介绍有sass和less没有stylus，下面是stylus
//stylus设置mixin
font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] &{
font-size: $font-size * 2;
}
[data-dpr="3"] &{
font-size: $font-size * 3;
}
