rem单位，它如何根据屏幕尺寸进行缩放

Question

我正在设计一个使用rem单位的网站，有人说，rem单位根据屏幕尺寸改变大小。

我尝试将浏览器窗口拖动到移动设备大小，并从chrome develop（计算出的样式）

中查看

而我所看到的，它仍然与桌面尺寸相同。相同的21px。 它不会改变。

你能解释一下，rem单位做了什么？

感谢。

Answer 1

rem unit表示根元素的字体大小，即HTML文档中的html元素。也就是说，它是“根源”。它与屏幕尺寸完全无关。

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

使字体大小取决于屏幕大小或窗口大小（两个不同的概念）的实用方法是使用CSS @media查询来设置font-size（在某些单元中），具体取决于屏幕或窗口尺寸（通常是宽度）。