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源码里做了什么骚操作;

lib-flexible源码

是不是恍然大悟,原来源码里会设置htmlfont-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文件如下:

配置postcss.config.js文件

配置里需要注意remUnit:75这配置;这个是和lib-flexible设置htmlfont-size为屏幕宽度除以10要保持一致,不然会出现错乱,这里同样以宽度750px设计稿为标准设置的,不同的设计稿宽度对应不同的单位值。

完成以上步骤后,我们在开发时只需要将设计稿样式拷贝过来,就会自动转成rem适配。

注意:

  1. 不需要进行转换rem的,在样式后面写上注释/*no*/
  2. 只能转换style中的css样式,不能转换script标签和元素里面css样式

以上只是我在Vue项目中用到的移动端rem适配方法,仅供参考。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue项目移动端的rem适配方法

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们