给出字体大小rem。无法在其他屏幕尺寸上缩放

Question

我已经使用rem单位在larege屏幕上填充，边距和字体大小了，但是输出很好...但是在小型屏幕设备上，尺寸并没有减小，而是在larege屏幕上存在措施，为什么rem单位不相对减小？ / p>

Answer 1

rem是Relative Elastic Measurement，并且基于body元素的字体大小。如果body上的字体大小是16px，则1rem是16px，无论您对其应用了什么元素或元素的字体大小。

如果您要查找的尺寸在大屏幕上变大而在小屏幕上变小，那么我建议使用vw。这是Viewport Width，是屏幕的宽度，以百分比表示，例如100vw是屏幕的整个宽度； 50vw是屏幕总宽度的50％。

然后您可以将填充设置为5vw，以便在大屏幕上填充更多，在小屏幕上填充更少：

ScreenSize 1200px：

padding: 5vw; /* padding: 60px */

ScreenSize 360​​px：

padding: 5vw; /* padding: 18px */

即使我们没有更改padding（5vw）的值，但相对于屏幕尺寸，padding的数量也已更改（60px和18px）。