admin管理员组文章数量:1570368
使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小
1.先设置header里面的meta标签：
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">2.在header写上script标签
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>要设置Html的font-size：
设置html标签的font-size，上面概论（使用rem为元素设定字体大小时，相对大小对比的是HTML根元素）写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。为什么是clientWidth/640?为什么要乘以100？
2.1 例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px，那么根据比率计算出实际设备里面宽度是：50*（320/640）=25px；首先这里没有问题，实际的上的宽度根据（320/640）这个比率计算出来了是25px，这个（320/640）相当于1rem。2.2.1）为了计算方便 我们后面把比率乘以了100，（320/640）*100，那么相对应这个元素在设置数值的时候就需要除以100了,这样可以保证最后出来的数值不变，相当于0.5rem=50*（320/640），最终出来的数值一致。 2.2.2）一般浏览器的最小字体是12px，如果font-size=（320/640）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题*100后，font-size是50px。解释一下：设备宽度/设计稿宽度（以320/640为例）
320/640=0.5*100=50px=1rem;
然后设置html标签的font-size：
font-size：0.32rem=50*0.32=16px;
（这个0.32的比例是自己设置的，因为屏幕最小用的最多的就是320的，这样比较成比例！！！）
就是说在这个html里面的所有1rem=16px了。如果这个字体在设计稿上是50px 而设计稿是640的大小 那在320的屏幕上应该是25px的大小
也就是1.5625rem大小。
公式总结：
1 rem =（ clientWidth/640）*100 *0.32= ？？ px（如上1 rem=16px）
xx px= （yy px）*（ clientWidth/640）{备注：yy：设计稿上大小；xx： 设备上具体大小}
zz rem= xx / 1rem=xx / ？？px {zz 就是你写在css里的具体字的大小}
举例：iphone6 宽372 设计稿还是640的(也有720的设计稿)
1 rem = 372/640*100*0.32= 18.6px
假如：设计稿是50px的
50*（372/640）=29px 实际屏幕上应该是29px
29/18.6=1.5625rem
字体大小写1.5625rem，和在320屏幕大小里写的大小一样的数值。在320宽的屏幕里就是16px大小，在372屏幕里就是29px大小。适配了啊，哈哈哈哈
版权声明：本文标题：字体适配不同屏幕大小 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1727669746a1125039.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论