移动端适配

介绍

移动端适配

安装

npm install lib-flexible --save

引用

main.js

import 'lib-flexible'

安装 px2rem-loader

npm install px2rem-loader --save-dev

配置 px2rem-loader

vue.config.js

chainWebpack: (config) => {
  config.module
    .rule("scss")
    .oneOf("vue")
    .use("px2rem")
    .loader("px2rem-loader")
    .before("postcss-loader")
    .options({
      remUnit: 75, // 设计稿定宽为750px，取1/10，则html的font-size=75px
      remPrecision: 8,  // 精确到小数点后8位
    })
    .end();
},

使用介绍

• px 单位，编译后会转化成 rem；
• 如无需转化，则 px 后面添加 /*no*/，一般 border-width 属性使用 ；
• 在 px 后面添加 /*px*/，会根据 dpr 的不同，生成三套代码。