移动端项目rem是必不可少的,在不同系统不同机型下,因屏幕大小尺寸不一样,使得用px单位的页面在移动端显示的不一样。
所以移动端项目才会使用rem单位
首先安装px2rem
npm install px2rem-loader -s
npm install lib-flexible —s
然后在main.js中引入lib-flexible
import 'lib-flexible/flexible'
然后在vue项目中build下的 utils.js中,找到generateLoaders 方法修改配置:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 50 //设计稿宽度/10
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
配置完成之后,重新启动项目,在浏览器中审查元素,会发现项目中的px单位都自动转换成rem单位了
至此移动端项目在各终端运行后都会自适应了