Vue 移动端适配 amfe-flexible
1、首先下载:npm installpx2rem-loader --savenpm install amfe-flexible --save2、main.js引入:import Vue from 'vue'import App from './App'import router from './router'// rem h5 适配import 'amfe-...
·
1、首先下载:
npm install px2rem-loader --save
npm install amfe-flexible --save
2、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/>'
})
3、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
更多推荐
已为社区贡献3条内容
所有评论(0)