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

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

TL; DR： 使用

px

。

事实

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

CSS定义了 参考像素 ，该 参考像素 可测量96
dpi显示器上像素的大小。在dpi基本上不同于96dpi的显示器上（例如Retina显示器），用户代理会重新调整

px

单位的大小，以使其尺寸与参考像素的尺寸匹配。换句话说，这种重新缩放正是为什么1个CSS像素等于2个物理视网膜显示像素的原因。

也就是说，直到2010年（尽管存在移动变焦情况），

px

几乎所有像素均等于一个物理像素，因为所有可广泛使用的显示器均为96dpi。

```
em
```
s中指定的大小是相 对于父元素的 。这导致了
```
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 。

意见

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

开始时，向用户提供缩放文本大小的唯一方法是使用相对大小单位（例如

em

s）。这是因为浏览器的字体大小菜单仅更改了根字体大小。因此，如果您在中指定了字体大小

px

，则在更改浏览器的字体大小选项时它们不会缩放。

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

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

Ctrl

/鼠标滚轮）。

1-自然发生统计错误

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

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

所以我的答案是使用像素单位。我用

px

一切。当然，您的情况可能会有所不同，并且如果您必须支持IE6（也许RFC的诸神会怜悯您），则

em

无论如何您都必须使用s。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/5148908.html

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

发表评论

评论列表（0条）