postcss-px2rem
-
postcss-px2rem
就是为了让我们直接在将代码中 px 自动转化成对应的 rem 的一个插件 (rem 是 root em 的缩写,rem 不是相对于当前元素,而是相对于根元素,所以,不论什么位置,使用 rem 单位都是相对于根元素的 font-size) -
安装以下插件
npm install postcss-px2rem -D npm install px2rem-loader -D
-
在
vue.config.js
文件中配置module.exports = { ..., chainWebpack: (config) => { config.module .rule('css') .test(/\.css$/) .oneOf('vue') .resourceQuery(/\?vue/) .use('px2rem') .loader('px2rem-loader') .options({ remUnit: 16 }) }, }
-
这样配置之后只是对 css 起作用,并不能对 sass、scss、less 等预处理语言进行处理,所以我们需要另外一个插件
postcs-plugin-px2rem
postcs-plugin-px2rem
-
安装
npm install postcss-plugin-px2rem -D
-
在
vue.config.js
文件中配置module.exports = { ..., css: { loaderOptions: { postcss: { postcssOptions: { plugins: [ require('postcss-plugin-px2rem')({ rootValue: 16, // 换算基数 // unitPrecision: 5, //允许REM单位增长到的十进制数字。 // propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。 // propBlackList: [], //黑名单 exclude: /(node_module)/, // 默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值 // selectorBlackList: [], //要忽略并保留为px的选择器 // ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。 // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。 mediaQuery: false, // (布尔值)允许在媒体查询中转换px。 minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0 }) ] } } } }, }
设置根元素 font-size
-
在 src/utils 文件夹中新建文件 rem.js 根据浏览器的宽度来设置根元素的 font-size
import _ from 'lodash' // Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 export const setRem = () => { // 当前页面屏幕分辨率相对于 1440宽的缩放比例,可根据自己需要修改 console.log(document.documentElement.clientWidth) const scale = document.documentElement.clientWidth / 1440 // 设置页面根节点字体大小(“Math.min(scale, 3)” 指最高放大比例为3,可根据实际业务需求调整) document.getElementsByTagName('html')[0].style['font-size'] = `${baseSize * Math.min(scale, 1.5)}px` } // 创建一个 debounced(防抖动)函数 const setDomFontSizeDebounce = _.debounce(setRem, 400) window.addEventListener('resize', setDomFontSizeDebounce)
-
在 main.js 文件中引入 setRem 方法并使用
import { setRem } from '@/utils/rem' setRem()
@别名
- vue 项目中当组件多的时候,以../ 的形式引入文件就会特别麻烦,所以设置 alias 别名的方式
moudle.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve('src') // 配置src为根目录
}
},
}
}