vue项目屏幕自适应_vue项目h5 屏幕自适应

1、安装lib-flexible

npm i lib-flexible -D

2、在main.js中引入

import 'lib-flexible/flexible'

3、在index.html文件中设置meta标签:

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是直接写，可自动装换