rem这个单位是根据页面根元素的字体大小来计算的 也就是根据html的字体大小 所以在不同的分辨率下只要改变html的 font-size就可以了
PC端 可以通过JS来动态设置根字体大小
<script>
window.onload = function() {
function setFontSize() {
//因为有的document.documentElement.clientWidth拿不到页面宽度所以要做兼容
let screenSize =
document.documentElement.clientWidth ||
document.getElementsByTagName("body").clientWidth;
if (screenSize <= 1200) {
screenSize = 1200;
}
let htmlEl = document.getElementsByTagName("html")[0];
//除以120是根据1920的设计稿 设置页面字体大小是16px 可根据需要进行调整
htmlEl.style.fontSize = screenSize / 120 + "px";
}
setFontSize();
window.onresize = setFontSize;
};
</script>
移动度设置根字体大小
<script>
window.onload = function() {
function setFontSize() {
let screenSize =
document.documentElement.clientWidth ||
document.getElementsByTagName("body").clientWidth;
if (screenSize >= 750) {
screenSize = 750;
}
let htmlEl = document.getElementsByTagName("html")[0];
// 跟字体大小是50px 设计稿是750
htmlEl.style.fontSize = screenSize / 7.5 + "px";
}
setFontSize();
window.onresize = setFontSize;
};
</script>