vue 移动端适配 amfe-flexibl
首先下载:
npm install px2rem-loader --save npm install amfe-flexible --save main.js引入: import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ // rem h5 适配 import ‘amfe-flexible/index.js‘ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, components: { App }, template: ‘<App/>‘ }) build文件夹下的utils.js: exports.cssLoaders 中添加: const px2remLoader = { loader: ‘px2rem-loader‘, options: { remUnit: 75 } } const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 改为: const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
关于1px转化问题: 1px
转化rem
后有些手机上显示模糊或不显示,解决办法:将px
大写,即1px
写为1PX