本文深入探讨了rem、em和px的区别，特别是rem在移动端适配中的作用。通过示例解释了em的相对尺寸特性，以及为何在移动端开发中常使用rem。此外，还讨论了设备像素比（DPR）和分辨率的关系，以及如何利用这些知识进行设计稿的适配，特别是针对iPhone 6等设备的适配策略。
一. rem是什么？！
rem是单位，它和px、em都是计量单位，都能表示尺寸。不同的是它表示相对于根元素（HTML文档中的HTML标签）字体大小的单位，如果html的font-size是16px的话，那么就有（1rem==16px）。
之前面试移动前端开发的时候被面试官嘲讽。看到我移动端的单位都是用的px没有用em就直接把我out。
二. 所以在此我要讲一下em：
em也是表示相对尺寸，用一句话概括就是：如果某个元素的字体大小是3em那么它换成px的话就是其父元素的字体大小的3倍的PX（如果他的父元素也是em没有测试，可以自己测试一下）。另外如果这个元素的宽度也是3em的话那么它的宽度换成px的话就是其本身字体大小的3倍的PX。作用在字体和非字体的尺寸单位时意义是不一样的。这是它的特点。再举一个例子：
<body>
<div style="font-size:20px;">
<div id="my" style="font-size:2em;width:2em;" >我是</div>
</div>
</body>
<script>
var m=document.getElementById("my")
var contentWidth = window.getComputedStyle(m).width;
var contentFont = window.getComputedStyle(m).f
最低0.47元/天 解锁文章
扫一扫
4233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
