vue移动端配置flexible实现rem布局

vue移动端配置flexible实现rem布局

vue2

1. 安装依赖

-D 等同于--save-dev    开发依赖
-S 等同于--save       项目必须的依赖(一个要打包到生产环境的安装包)

npm i lib-flexible --save-dev

npm install px2rem-loader --save-dev

1. 引入lib-flexible

import 'lib-flexible/flexible'

1. 配置px2rem-loader
   在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}

1. 在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

• 完成

vue3

    //配置依赖
npm i lib-flexible --save-dev
npm i postcss-px2rem --save-dev

// 在main.js里面引入
import 'lib-flexible/flexible'
//然后在vue.config.js 中配置
css: {
loaderOptions: {
postcss: {
// 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}

• 完成

以上完成之后便可以在书写css，在检查元素里面。改变成移动端调试。可以看到相应的变化。

如下

• html及css

<template>
<div class="jd-sub">
<div class="en">
</div>
</div>
</template>

<script>

export default {
data(){
return{

}
}
}
</script>

<style scoped lang='less'>
.en{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}

</style>

• 调试界面