cli3 px转rem适配移动端_基于 vue-cli3.0 的移动端项目适配

基于 vue-cli3 的 vue 移动端样式适配

简介

lib-flexible 为页面自动添加 标签，根据屏幕分辨率大小的不同，调整根元素html的font-size的值从而达到每个元素宽高自适应变化，以适配不同的屏幕。

postcss-px2rem 会将px转换为rem。

安装

npm install lib-flexible --save

npm install postcss-px2rem --save-dev

lib-flexible

由于 lib-flexible 过于陈旧，因此在我们使用之前需要修改其代码配置。

if (!dpr && !scale) {

var isAndroid = win.navigator.appVersion.match(/android/gi);

var isIPhone = win.navigator.appVersion.match(/iphone/gi);

var devicePixelRatio = win.devicePixelRatio;

// 在下面判断条件中添加 || isAndroid 选项，因为现在安卓也有高清屏

if (isIPhone || isAndroid) {

if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {

dpr = 3;

} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){

dpr = 2;

} else {

dpr = 1;

}

} else {

dpr = 1;

}

scale = 1 / dpr;

}

修改好配置后我们把这个flexible.js文件单独拉出来，然后在main.js中引入就可以了。要注意在index.html中不能含有meta name="viewport" 标签，否则flexible将不起作用。

postcss-px2rem

vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。

px2rem的配置放在vue-cli3项目根目录下的vue.config.js中(如果找不到，就自己创建一个)。

具体配置如下

module.exports = {

css: {

loaderOptions: {

css: {},

postcss: {

plugins: [

require('postcss-px2rem')({

remUnit: 37.5

})

]

}

}

},

}

配置好后，就可以优雅的进行移动端项目开发了。要注意remUnit的配置，我们只需要设置为设计图的1/10即可。