雷姆单位，如何根据屏幕尺寸缩放

Question

有人说，我正在设计一个使用rem单元的网站，rem单元会根据屏幕尺寸更改尺寸。

我尝试将浏览器窗口拖动到移动设备尺寸，然后从chrome进行查看（计算出的样式）

我所看到的是，它仍然与桌面大小相同。相同的21px 它没有改变。

您能解释一下，REM单位做什么？

谢谢。

Answer 1

该rem单元装置的根元素，这是的字体大小html在HTML文档中的元素。也就是说，它是“ root em”。它与屏幕大小绝对无关。

使用rem而不是获得的唯一好处em是您避免自己进行一些计算。您可以将字体大小设置锚定到根元素的字体大小，而不用考虑可能具有不同字体大小的元素的嵌套。而且，您失去的是某些古老的浏览器不知道该rem单位，因此rem它们将忽略您基于的字体大小设置。

使字体大小取决于屏幕大小或窗口大小（两个不同的概念）的实际方法是使用CSS @media查询font-size根据屏幕或窗口大小（通常为宽度）进行设置（以某些单位）。