前提
1rem的大小是通过html下的根字体大小(font-size)这个css属性告诉浏览器的。
比如 : 设置html当前font-size = 10px;那么1rem = 10px;
计算公式
1.根据设计稿A(假如设计稿宽度是750),有一个预设的rem和px的比例B(假如是1rem = 10px)
2.获取用户浏览器的可视区域的宽度C(假如是750px),那么他此时1rem的尺寸D 可以根据 B/A = D/C (假设的字体大小/设计稿宽度=实际的字体大小/实际的屏幕宽度)这个公式得知。
10/750 = x/750 ==> x=100px
3.那么,当屏幕大小变化时,就需要取得当前屏幕大小来根据公式计算出此刻font-size大小
var fun = function (document, window) {
//获取屏幕可视区域宽度
var deviceWidth = document.documentElement.clientWidth;
// console.log('deviceWidth', deviceWidth);
//区分pc端和移动端,根据设计稿宽度计算根字体大小
if (deviceWidth > 768) {
//设计稿宽度1920px/实际字体大小100px = 19.20
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
} else {
document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
}
}
fun(document, window);
可以根据设计稿宽度设置,获取到当前屏幕font-size大小,设置到蓝湖上,直接转换为rem进行布局即可。
使用媒体查询进行区分样式,使用rem书写样式 即可
如果想要在窗口大小发生变化时同步放大缩小,可使用window.onresize监听:
window.onresize = () => {
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 768) {
//设计稿宽度1920px/实际字体大小100px = 19.20
document.documentElement.style.fontSize = deviceWidth / 19.2 + "px";
} else {
document.documentElement.style.fontSize = deviceWidth / 3.75 + "px";
}
};