Vue.js 中自动将 px 单位转换为 rem 单位,构建响应式布局

step1. 安装 lib-flexible 插件

>> npm install lib-flexible --save

step2. 安装 postcss-pxtorem 插件

>> npm install postcss-pxtorem --save

step3. 引入 lib-flexible
在 main.js 文件中引入 lib-flexible:

import 'lib-flexible/flexible'

step4. 编辑 postcss.config.js 文件
新建 postcss.config.js 文件,编辑如下:

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            "rootValue": 78,
            "propList": ['*']
        }
    }
}

在项目中填写美工人员设计好的 px 尺寸,即可自动转换为 rem 尺寸,自适应不同分辨率的屏幕。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页

打赏

魏晓蕾

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者