我应该在CSS中使用px或rem值单位吗？

小编典典

我应该在CSS中使用px或rem值单位吗？

html

我正在设计一个新网站，希望它与尽可能多的浏览器和浏览器设置兼容。我试图确定我应该使用哪种度量单位来显示字体和元素的大小，但无法找到一个确定的答案。

我的问题是：我应该在CSS中使用px还是rem在CSS中使用？

到目前为止，我知道使用px与在浏览器中调整基本字体大小的用户不兼容。
我忽略了ems，因为与rems 相比，它们在级联时更加麻烦。
有人说rems与分辨率无关，因此更可取。但是其他人则说，大多数现代浏览器无论如何都会对所有元素进行同样的缩放，因此使用px并不是问题。

我之所以这样问是因为，对于CSS中最理想的距离度量有很多不同的看法，我不确定哪个是最好的。

阅读 366

2020-05-10

共1个答案

小编典典

TL; DR： 使用px。

事实

首先，了解每个规范 CSS px单位不等于一个物理显示像素非常重要。这始终是真实的-即使是在1996年[CSS 1个规范]。

CSS定义了 参考像素 ，该 参考像素 可测量96
dpi显示器上像素的大小。在dpi基本上不同于96dpi的显示器上（例如Retina显示器），用户代理会重新调整px单位的大小，以使其尺寸与参考像素的尺寸匹配。换句话说，这种重新缩放正是为什么1个CSS像素等于2个物理视网膜显示像素的原因。

也就是说，直到2010年（尽管存在移动变焦情况），px几乎所有像素均等于一个物理像素，因为所有可广泛使用的显示器均为96dpi。

ems中指定的大小是相 对于父元素的 。这导致了em“混合问题”，其中嵌套元素逐渐变大或变小。例如：
```
body { font-size:20px; }
```
div { font-size:0.5em; }

给我们：

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

CSS3 rem始终仅与根html元素有关，现在在使用的所有浏览器中，有96％支持CSS3 。

意见

我认为每个人都同意，将页面设计为适合每个人并考虑视力障碍者是很好的。这样的考虑因素之一（但不是唯一的考虑因素！）是允许用户扩大您网站的文本，以便于阅读。

开始时，向用户提供缩放文本大小的唯一方法是使用相对大小单位（例如ems）。这是因为浏览器的字体大小菜单仅更改了根字体大小。因此，如果您在中指定了字体大小px，则在更改浏览器的字体大小选项时它们不会缩放。

现代的浏览器（甚至不是那么现代的IE7）都更改了默认缩放方法，以简单地放大所有内容，包括图像和框尺寸。本质上，它们使参考像素更大或更小。

是的，有人仍然可以改变自己的浏览器默认样式表来调整默认字体大小（相当于旧风格的字体大小的选项），但是这是绕了一个非常深奥的方式，我敢打赌没有人1做的。（在Chrome浏览器中，它埋在高级设置，Web内容，字体大小下。在IE9中，它甚至更隐藏。您必须按Alt，然后转到“查看”，“文本大小”。）在其中选择“缩放”选项要容易得多。浏览器的主菜单（或使用Ctrl+
+/ -/鼠标滚轮）。

1-自然发生统计错误

如果我们假设大多数用户使用zoom选项缩放页面，我会发现相对单位基本上无关紧要。如果所有内容都以同一单位指定（图像全部以像素为单位），则开发页面要容易得多，而且您不必担心复合。（
“有人告诉我不会有数学运算” –必须处理1.5em的实际运算。）

仅对字体大小使用相对单位的另一个潜在问题是，用户调整大小的字体可能会破坏布局所做的假设。例如，这可能导致文本被剪切或运行时间过长。如果使用绝对单位，则不必担心因布局中断而产生意外字体大小。

所以我的答案是使用像素单位。我用px一切。当然，您的情况可能会有所不同，并且如果您必须支持IE6（也许RFC的诸神会怜悯您），则em无论如何您都必须使用s。

2020-05-10