rem适配方式
原理: 将px转化成rem,通过setRem缩放页面适配大屏
一. 全局配置 setRem
1.设置缩放比例: 文件 src/utils/rem.js
const baseSize = 16;
// 设置 rem 函数
function setRem() {
// 当前页面屏幕分辨率相对于 1920宽的缩放比例,可根据自己需要修改
const scale = document.documentElement.clientWidth / 3200;
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};
2.main.js配置
import './utils/rem' 引入
二. 单个组件引用 setRem
// 创建时设置
created() {
this.setRem()
window.onresize = () => {// 改变窗口大小是刷新
return (() => {
this.setRem()
})()
}
},
methods: {
setRem() {
const baseSize = 16
// 当前页面屏幕分辨率相对于 1920宽的缩放比例,可根据自己需要修改
const scale = document.documentElement.clientWidth / 3200
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px"
},
}
设置px转换rem
1.npm插件 postcss
1). 安装
npm install postcss-pxtorem postcss-import --save-dev
2). 创建postcss.config.js文件并配置
module.exports = {
plugins: {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 16,//根节点字体的大小
"propList": ["*"]
}
}
}
3). main.js中引入
import 'postcss-import'
2.scss函数转换
$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义
html {
font-size: $browser-default-font-size;
}
@function pxToRem($px){//$px为需要转换的字号
@return $px / $browser-default-font-size * 1rem;
}
// 使用
.total-title {
height: pxToRem(300px);
}
三.子组件问题
当大屏作为子组件引用时,window.onresize会失效
可以用<iframe>引入本项目的路由的方式引入展示
<iframe :src="src" style="height: 88vh;width: 100%;"></iframe>
src为已经设置好的路由:
例如:
这是src可以为'/tree'
{
path: '/tree',
name: 'tree',
component: (resolve) => require(['@/view/test/tree'], resolve),
meta:{keepAlive:true},
},