淘宝flexible的rem使用

源文：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

1）普通js、jquery项目使用

页面最开始引入第三方cdn的：<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

或者下载zip文件引入

2）vue中使用：https://www.w3cplus.com/mobile/vw-layout-in-vue.html

然后将视觉稿的px转换rem:

 由于淘宝团队在Flexible中(上面引入的js中)会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），

每一份称为一个单位a,而1rem=10a，也就是说会在将视觉稿等分成100a同时也可以认为等分成10rem，

比如ui给的视觉稿尺寸是750px(视觉稿尺寸一般都是640px、750px、1125px,因为要考虑Retina屏)

那html的font-size就是750/10=75px;

比如现在设计稿一个图片高度是176px，那在代码中就要写176/75=2.346667，所以这个图片在代码中

就是2.35rem。

每次都去计算开发效率会很慢，所以淘宝团队基于sublime开发了一个插件：https://github.com/flashlizi/cssrem

字体不要使用rem：

//data-dpr是引入的js中的属性

div { 
width: 1rem; 
height: 0.4rem; 
font-size: 12px; // 默认写上dpr为1的fontSize
} 
[data-dpr="2"] div { 
font-size: 24px; 
}
[data-dpr="3"] div { 
font-size: 36px;
 }

sass宏：

@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; 
} 

}

//代码引入 @include font-dpr(16px)