vue-cli3.0引入px2rem与lib-flexible 移动端适配

最新推荐文章于 2021-01-14 15:43:24 发布

weixin_34334744

最新推荐文章于 2021-01-14 15:43:24 发布

阅读量191

点赞数

文章标签： json javascript 开发工具 ViewUI

原文链接：https://my.oschina.net/voole/blog/2995961

版权

为什么80%的码农都做不了架构师？>>>

lib-flexible

作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：yarn add lib-flexible
引入：入口文件main.js中：import 'lib-flexible/flexible.js'

pxtorem

作用：将项目中css的px转成rem单位，免去计算烦恼
安装：yarn add postcss-pxtorem
配置：package.json内，在postcss内添加：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
        "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
     }
    }
  },

TIPS
1、pxtorem中，对于想忽略的px写成大写即可，诸如 border:1PX solid #fff;
2、也可以选择postcss-px2rem，我更喜欢pxtorem的忽略方式，方便我vscode的beautify自动格式化代码

转载于:https://my.oschina.net/voole/blog/2995961