vue中使用rem布局的两种方法小结
作者：Robin_zero
这篇文章主要介绍了vue中使用rem布局的两种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue使用rem布局的两种方法
在使用 vue-cli 开发 H5 项目时，需要进行 rem适配，下面提供两种常用的方法（以 750 设计稿为例），希望对大家有所帮助。
方法一
在 index.html 或者 main.js 中添加以下代码：
const setHtmlFontSize = () => {
const htmlDom = document.getElementsByTagName('html')[0];
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
if (htmlWidth >= 750) {
htmlWidth = 750;
}
if (htmlWidth <= 320) {
htmlWidth = 320;
}
htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();注： 这里设置的比例是 100px = 1rem，例如：元素宽度为 100px 时,可以直接写成 1rem
方法二
使用 lib-flexible 和 px2rem-loader 自动转换
1.安装插件
npm install lib-flexible --save npm install px2rem-loader --save-dev
2.配置插件
在入口文件 main.js 中引入 lib-flexible：
在 build/utils.js 文件中配置 px2rem-loader：
安装并配置好 lib-flexible 和 px2rem 之后要重启一下项目，才能自动把 px 转换成 rem。内联的 px 样式不能自动转换。
另外，px 写法上会有些不同，大家可以参考 px2rem 官方介绍，下面简单介绍一下。
1. 直接写 px，编译后会直接转化成 rem；---- 【除下面两种情况，其他长度用这个】
2. 在 px 后面添加 /*no*/，不会转化 px，会原样输出； ---- 【一般 border 用这个】
3. 在 px 后面添加 /*px*/，会根据 dpr 的不同，生成三套代码。---- 【一般 font-size 用这个】
示例代码如下：
/* 编译前 */
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
/* 编译后 */
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}vue项目使用rem布局 响应式布局
1、 安装postcss-px2rem及px2rem-loader
npm install postcss-px2rem px2rem-loader --save
2、在根目录src中新建util目录下新建rem.js等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}3、在main.js中引入适配文件
import './util/rem'
4、到vue.config.js中配置插件
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16
})
// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。