vue移动端配置flexible实现rem布局
vue2
- 安装依赖
-D 等同于--save-dev 开发依赖
-S 等同于--save 项目必须的依赖(一个要打包到生产环境的安装包)
npm i lib-flexible --save-dev
npm install px2rem-loader --save-dev
- 引入lib-flexible
import 'lib-flexible/flexible'
- 配置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
}
}
- 在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>
- 调试界面