源文: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)