1、安装lib-flexible
npm i lib-flexible -D
2、在main.js中引入
import 'lib-flexible/flexible'
3、在index.html文件中设置meta标签:
<meta name='viewport' content='width=device-width , initial-scale=1.0'>
4、然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具
npm i px2rem-loader -D
5、修改配置文件
5.1 有build文件夹
/build/util.js：
a、在cssLoader对象下面添加一个px2remLoader对象:
const px2remLoader = {
loader : 'px2rem-loader',
options : {
//这个参数是通过psd设计稿的 宽度 / 10 来计算,这里以750为标准
remUnit : 75
}
}
b、然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader]
image.png
const loaders = [cssLoader, px2remLoader]
6.使用了vue cli3或3以上版本
在项目根目录下新建vue.config.js文件
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// 新增px2remLoader
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
function generateLoaders (loader, loaderOptions) {
// 新增px2remLoader
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
}
项目里面直接使用px，UI给的psd是直接写，可自动装换
