一、 rem vs em
| 单位 | 定义 | 特点 |
|---|---|---|
| rem | font size of the root element | 以根元素字体大小为基准 |
| em | font size of the element | 以父元素字体大小为基准 |
二、js计算
为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。
<script>
const oHtml = document.getElementsByTagName(‘html‘)[0];
const width = oHtml.clientWidth;
oHtml.style.fontSize = 14 * (width / 375) + "px";
</script>
三、媒体查询
@media screen and (min-width: 375px){
html {
font-size: 14.0625px;
}
}
@media screen and (min-width: 360px){
html {
font-size: 13.5px;
}
}
@media screen and (min-width: 320px){
html {
font-size: 12px;
}
}
html {
font-size: 16px;
}
参考文档：
简单粗暴的移动端适配方案 - REM
原文地址：https://www.cnblogs.com/shangyueyue/p/10019387.html
时间： 2024-08-25 22:27:14