Vue项目移动端的rem适配方法
此文为我个人记录笔记,日后方便学习参考。
1. rem
使用rem
单位可以让设计更加灵活,能够控制元素整体放大缩小,而不是固定大小。rem
单位基于html
元素字体大小,
2. 适配工具
lib-flexible
postcss-px2rem-exclude
3. lib-flexible
安装lib-flexible:
npm install lib-flexible --save
入口main.ts文件中引入lib-flexible:
import 'lib-flexible'
到此,我们已经算是完成移动端适配了;
我们先来看看lib-flexible源码里做了什么骚操作;
是不是恍然大悟,原来源码里会设置html
的font-size
为屏幕宽度除以10
,也就是说1rem
等于html
根节点的font-size
;
举个例子:一般我们的设计稿宽度(iPhone6)是750px,此时1rem就相当于75px;
这个时候你是不是就觉得可以了已经完美了,但是到你开发时你就会发现一个非常麻烦的点,设计稿给到我们的是px
单位,但是我们在开发还要自己计算一下rem
,又开始懵了。。。不过好在此时我们可以通过postcss-px2rem-exclude
自动将css中的px
转成rem
。
4. postcss-px2rem-exclude
安装postcss-px2rem-exclude:
npm install postcss-px2rem-exclude --save
配置postcss.config.js文件如下:
配置里需要注意remUnit:75
这配置;这个是和lib-flexible
设置html
的font-size
为屏幕宽度除以10
要保持一致,不然会出现错乱,这里同样以宽度750px设计稿为标准设置的,不同的设计稿宽度对应不同的单位值。
完成以上步骤后,我们在开发时只需要将设计稿样式拷贝过来,就会自动转成rem
适配。
注意:
- 不需要进行转换
rem
的,在样式后面写上注释/*no*/
- 只能转换
style
中的css
样式,不能转换script标签和元素里面css样式
以上只是我在Vue项目中用到的移动端rem适配方法,仅供参考。
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » Vue项目移动端的rem适配方法