关于移动端 em 尺寸单位自适应的问题！！！

Question

我知道rem做自适应布局是用js动态获取设备宽度，然后修改html字体尺寸，从而让使用rem单位的元素自动缩放，那em单位是如何做到自适应呢？求解！有案例最好，谢谢！

Answer 1

em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算

html { font-size: 100%; }
.box-0 {
    height: 1em; /* 此时height等于16px */
}
.box-1 { 
    font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */ 
    height: 1em; /* 此时实际height等于10px */
}

Answer 2

rem是相对根元素，而 em是和自身字体挂钩的，rem更加适合做响应。因此针对主流的设备通过media查询去进行不同根元素的字体大小设置，达到重构网页与设计相差不大。但是em由于与本身字体（或其父元素）关系较大，很难做到对不同设备能够表现出相对比例的变化。

Answer 3

em同理，em是相对父级的，那么一层一层下去，最终是相对跟元素的。为什么要用em啊？！

Answer 4

加载页面的时候，使用JS根据屏幕的大小动态设置html标签的font-size，随着html标签font-size的值变化，div的设置的rem宽度值继承了html的font-size 也跟着变化，即实现了div随屏幕大小变化而变化，以此类推到页面所有的元素。 推荐 ：啃先生的 移动Web怎么做屏幕适配（一） 主要是讲利用rem怎么做到内容自适应，希望可以帮到你更好的理解。

Answer 5

自适应是通过@media查询来套用不同的CSS代码而实现的啊，和rem还有em没有关系啊，rem和em是关于各个元素缩放的东西，最多就是某些浏览器在不同尺寸的设备上对最小字号做了强制规定而已。

你把两个完全不相关的概念搞混了