关于rem的疑问？

Question

假如我的设计图是750的，我按照设计图去写我的页面，单位就是像素值。那么我可以假设1rem=75px，通过这个比例去把页面中的px都改为rem.

那么实际代码运行的时候，浏览器的html的fontSize值是怎么确定的呢？

还有设计图是750的时候，它的html的fontSize又是多少呢？

Answer 1

什么是rem

• rem是根节点的字体大小
• 一般是指html的font-size

html { font-size: 75px; }
html > div { font-size: 2rem; // => 150px}

设计稿px转rem

设计稿宽度	假设1rem宽度	头像宽度px	头像宽度转换后的rem
750px	75px	500px	(500 / 75)rem

那不同的手机屏幕,怎么适配呢?

• 比如手机屏幕变成375px了,这个时候html是75px,div是6.666rem,那结果是500px,就超出屏幕范围了,根本无法自适应
• 这个时候就要调整根节点的字体大小了,不能再是75px了
• 而初始设置好的rem保持不变即可

设备类型	设备宽度	1rem宽度	头像宽度px	头像宽度转换后的rem
设计稿	750px	75px	500px	6.666rem
iphone5	320px	320 / 750 * 75	-	6.66666rem
iphone6	375px	375 / 750 * 75	-	6.66666rem
iphone plus	414px	414 / 750 * 75	-	6.66666rem

计算原理

• 就是获取屏幕宽度,除了设计稿的宽度,再*上初始字体大小即可

  • 可以监听屏幕缩放事件
  • 可以在网页加载时就获取屏幕宽度
• 总而言之,就是要用js设置Html节点的大小

Answer 2

动态计算的。可以了解下flexible.js

Answer 3

css 设置的啊，你给 html 或者 :root 设置多大的 font-size 那么 1 个 rem 就是多大，如果不设置浏览器有一份 user agent 的 stylesheet 会给一个默认值。

没明白么？你看下 em 怎么用：

p{font-size: 100px; line-height: 1.5em;}

p 的line-height是多少？150啊，em 是当前的 font-size。那 rem 是多少？一样的道理，只不过它永远都是取的 root 节点的 font-size 作为参考。

html { font-size: 100px;}

.foo {width: 3rem;}

请问 .foo 的宽度多少？300px啊，因为 1rem 等于当前 root 节点的 computed 的 font-size 大小啊。注意是 html 节点实际使用的 font-size 值，多处定义看 css rule 的权重。

Answer 4

1rem = 75px, html的font-size就设置75px呗

Answer 5

1. rem = html 的 font-size
2. 现在有 vw vh，可以不用算 rem
3. 用 rem 搞等比缩放是蠢方法