rem 概念
rem(font size of the root element)是指相对于根元素(html)的字体大小的单位
html {
font-size: 100px;
}
.div1{
width: 1rem; // 1*100 = 100px 实际是100px
}
从上面可以看出现在将html的font-size 设置为 50px,那么div1的宽度就变成1乘以50 等于 5px,根元素字体大小缩小一半,div1的宽度也同样缩小一半,根据这个特性我们可以通过resize 事件去动态的线性的修改html的fontSize,那么界面上的元素就可以同比增加和缩小
大屏项目中应用
pubic html 入口页面中引入rem.js
rem.js
尺寸 | html的font-size | |
---|---|---|
设计稿尺寸 | 1920 | 100 |
真实屏幕尺寸 | clientWidth | 100/(1920/clientWidth) |
<script>
(function () {
// 页面一加载就要知道页面宽度计算
var setFont = function () {
// 因为要定义变量可能和别的变量相互冲突,污染,所有用自调用函数
var html = document.documentElement; // 获取html
// 宽高比
const widthToHeight = 1920 / 1080;
// 获取宽度
var width = html.clientWidth;
// 计算高度
const height = width / widthToHeight;
//设置body的高度
// document.getElementsByTagName("body")[0].style.height = height + "px";
// document.getElementsByTagName("body")[0].style.border = '2px solid';
// 设计稿1920 设计稿对应的HTML fontsize 100
const rate = 1920/100
// 设置html的基准值
var fontSize = width / rate + "px";
// 根据当当前屏幕宽度动态修改html 根元素的fontsize
html.style.fontSize = fontSize;
};
setFont();
// 2、页面改变的时候也需要设置
// 尺寸改变事件
window.addEventListener("resize",function () {
setFont();
});
})();
</script>
然后在页面中使用rem单位 就可以实现在不同屏幕分辨率等比缩放,当我们在使用echarts的一些图表的时候不能直接写rem 单位,echarts是只认识px为单位的,需要我们写个函数将rem转换成px
// 获取到当前分辨率下的html 的font-size 然后通过 fontSize * rem = px
export const remToPx = (rem) => {
const docEl = document.documentElement;
const clientWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
if (!clientWidth) return;
const fontSize = 100 * (clientWidth / 1920);
return rem * fontSize;
};
我这里设置的100 是为了在写代码的时候好计算,你可以设置其他值,可以借助vscode工具帮我们计算
设置
按enter 自动帮我们转成rem