我正在设计一个新网站,我希望它与尽可能多的浏览器和浏览器设置兼容。我正在尝试决定我的字体和元素的大小应该使用什么测量单位,但我无法找到一个确凿的答案。
我的问题是:我应该在我的 CSS 中使用 px
还是 rem
?
- 到目前为止,我知道使用
px
与在浏览器中调整基本字体大小的用户不兼容。
- 我忽略了
em
,因为与 rem
相比,它们在级联时更难维护。
- 有人说
rem
与分辨率无关,因此更受欢迎。但也有人说,大多数现代浏览器无论如何都会平等地缩放所有元素,因此使用 px
不是问题。
我问这个是因为对于 CSS 中最理想的距离度量有很多不同的意见,我不确定哪个是最好的。
TL;DR: 使用 px
。
事实
首先,知道 per spec 非常重要。 ,CSS px
单位不 等于一个物理显示像素。 一直都是如此——即使是在 1996 年的 CSS 1 spec .
CSS 定义了引用像素,它在 96 dpi 显示器上测量像素的大小。在 dpi 与 96dpi 显着不同的显示器(如 Retina 显示器)上,用户代理会重新调整 px
单位,使其大小与引用像素的大小相匹配。换句话说,这种重新缩放正是 1 个 CSS 像素等于 2 个物理 Retina 显示像素的原因。
也就是说,直到 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
现在 99.67% of all browsers in use 支持 CSS3 rem
,它始终只相对于根 html
元素。 .
意见
我认为每个人都同意,最好将您的网页设计为适合所有人,并考虑到视障人士。一个这样的考虑因素(但不是唯一一个!)是允许用户将您网站的文本放大,以便于阅读。
一开始,为用户提供缩放文本大小的唯一方法是使用相对大小单位(例如 em
s)。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此,如果您在 px
中指定字体大小,则在更改浏览器的字体大小选项时它们不会缩放。
现代浏览器(甚至不那么现代的 IE7)都将默认缩放方法更改为简单地放大所有内容,包括图像和框大小。本质上,它们使引用像素变大或变小。
是的,仍然有人可以更改他们的浏览器默认样式表来调整默认字体大小(相当于旧式字体大小选项),但这是一种非常深奥的方法,我敢打赌没人1 做到了。 (在 Chrome 中,它隐藏在高级设置、Web 内容、字体大小下。在 IE9 中,它更加隐藏。您必须按 Alt,然后转到查看、文本大小。)只需选择缩放选项就容易多了浏览器的主菜单(或使用Ctrl++/-/鼠标滚轮)。
1 - 自然在统计误差范围内
如果我们假设大多数用户使用缩放选项缩放页面,我发现相对单位大多无关紧要。如果所有内容都以相同的单位指定(图像均以像素为单位),则开发页面会容易得多,并且您不必担心复合。 (“我被告知不会有数学运算” - 需要计算 1.5em 的实际结果。)
仅对字体大小使用相对单位的另一个潜在问题是,用户调整大小的字体可能会破坏您的布局所做的假设。例如,这可能会导致文本被剪裁或运行时间过长。如果您使用绝对单位,则不必担心意外的字体大小会破坏您的布局。
所以我的答案是使用像素单位。我对所有内容都使用 px
。当然,你的情况可能会有所不同,如果你必须支持 IE6(愿 RFC 之神怜悯你),你无论如何都必须使用 em
s。
我是一名优秀的程序员,十分优秀!