移动端适配方案pxtorem

目录

• 一、移动端适配方案pxtorem
  • 1、安装
  • 2、新建postcss.config.js配置文件（与node_modules同一目录）
  • 3、main.js引入

一、移动端适配方案pxtorem

1、安装

# vue create hello-world创建的项目
npm i -D autoprefixer@8.0.0
npm i -D postcss-pxtorem
npm i -S lib-flexible

2、新建postcss.config.js配置文件（与node_modules同一目录）

module.exports = {
    plugins: {
        //autoprefixer 自动补全css前缀的插件
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
            // html标签的font-size属性比屏幕宽度为：1:10
            // 在build代码时，插件将单位px转rem的比值为：75
            rootValue: 75, // 微信小程序为固定宽度750rpx
            propList: ['*']  // 指定哪些css属性需要换算（行内样式不会换算，大写的PX不会换算）
        }
    }
};

3、main.js引入

import 'lib-flexible'