移动端项目,最麻烦的就是去写适配,我们都知道使用viewport
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
最近写了一个移动的项目推广,收到大佬的推荐,开始使用新的淘宝适配插件
http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
使用方法也很简单,直接贴步骤:
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2:他是基于font-size:75px;
所以我们的css样式 测量的px/75 就是我们想要的rem
.text{
width:200px;
height:200px;
}
转为rem
.text{
width:2.6rem;
height:2.6rem;
}
以上就是使用方法啦~也可以本地引入先从git 上拉去下来哦~
但是这样对于比较小的移动端项目来说还可以计算,如果是很大的项目,我们的开发效率这样在进行计算就会很低了
这样的时候,就需要,配合 px2rem 来使用,可以对我们的px 值进行转化,最常见的就是vue 项目
1:安装
npm i lib-flexible
2: 在main.js 中引入
import 'lib-flexible/flexible'
3:安装px2rem
npm i px2rem-loader
4: 在build /