投稿

vue3.x移动端适配px2rem

Vedu • • 程序开发 • 阅读 1118

移动端适配最容易的方式是使用rem，而rem经常有一些小数之类的，不好处理的数据，所以我们用到px2rem，代码里面使用px布局，编译为rem来渲染页面，这样同时兼具了开发效率和布局效果。

1、安装插件

npm install postcss-pxtorem@5.1.1 --save-dev
npm install lib-flexible --save

2、配置package.json

在package.json中添加如下代码

"postcss": {
  "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 37.5, //以375为设计稿宽度
      "propList": [
        "*"
      ]
    }
  }
}

3、在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

重新运行项目，这样项目css里面使用px就会自动转化为rem以适配各种屏幕尺寸。写代码过程中，直接用蓝湖或者量出的设计稿尺寸进行布局就好了，大大加快了布局效率。

4、注意事项

1、如果某一个元素不希望进行自动换算，我们有两个比较方便的办法：
1）使用style来写多少像素。
2）我们可以在单位的后面添加/no/，即可忽略当前换算。例如：

height: 44px; /*no*/

2、设计稿大于540px时，我们需要修改lib-flexible里面的限制才能使用，否则最大基准尺寸不能大于540，修改如下：
文件位置：
node_modules/lib-flexible/flexible.js

if (width / dpr > 540) {
  width = 540 * dpr;
}

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/29808.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-10-20 07:30
下一篇 2021-10-20 07:31

相关推荐

发表评论

登录后才能评论