标签:body 查询 pre class get lan col 页面 参考
一、 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; }
参考文档:
标签:body 查询 pre class get lan col 页面 参考
原文地址:https://www.cnblogs.com/shangyueyue/p/10019387.html