我应该使用px或rem值单位在我的CSS？ [英] Should I use px or rem value units in my CSS?
问题描述
我正在设计一个新网站，我希望它与尽可能多的浏览器和浏览器设置兼容。我试图决定我的字体和元素的大小应该使用的测量单位，但是无法找到确定的答案。
我的问题是：我应该在我的CSS中使用 px 还是 rem
- 到目前为止，我知道使用
px与在浏览器中调整基本字体大小的用户不兼容。 - 我忽略了
em，因为它们比起rems。 - 有人说，
em是分辨率独立的，因此更为理想。但有人说，大多数现代浏览器无论如何都放大所有元素，所以使用px不是问题。
我问这是因为有很多不同的意见，什么是最好的措施的距离在CSS，我不知道哪个是最好的。
TL; DR：使用 px 。
事实
-
首先，非常重要的是要知道每个规格，CSS
pxunit 不等于一个物理显示像素。这总是 是真的–即使在1996年 CSS 1规范中。 p>
CSS定义参考像素，用于测量96 dpi显示屏上像素的大小。在具有基本上不同于96dpi的dpi（例如Retina显示器）的显示器上，用户代理重新调整
px单元的大小，使其大小与参考像素的大小匹配。换句话说，这种重新缩放正是为什么1个CSS像素等于2个物理视网膜显示像素。
这就是说，直到2010年（尽管移动缩放情况）
px几乎总是等于一个物理像素，因为所有广泛可用的显示大约是96dpi。 -
在
em中指定的是相对于父元素。这导致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元素，是太新无法依赖的。截至2012年7月，围绕所有正在使用的浏览器中的75％支持rem。
意见
我认为大家都同意，设计您的网页以适应每个人，并考虑视障者是很好的。一个这样的考虑（但不是唯一的一个！）允许用户让你的网站的文本更大，以便更容易阅读。
只有通过使用相对大小单位（例如 em s）为用户提供缩放文本大小的方法。这是因为浏览器的字体大小菜单只是改变了根字体大小。因此，如果您在 px 中指定字体大小，则在更改浏览器的字体大小选项时，它们不会缩放。
现代浏览器（甚至不那么现代的IE7）都将默认缩放方法更改为简单放大所有内容，包括图像和框大小。基本上，它们使参考像素变大或变小。
是的，有人仍然可以更改其浏览器默认样式表以调整默认字体大小（相当于旧样式字体大小选项），但这是一个非常深奥的方式去，它会打赌谁没有 1 。 （在Chrome中，它隐藏在高级设置，Web内容，字体大小之下。在IE9中，它甚至更隐藏，您必须按Alt，然后转到视图，文本大小。）只需选择缩放选项浏览器的主菜单（或使用 Ctrl + + / - / mouse wheel）。
1 - 在统计误差范围内，自然
如果我们假设大多数用户使用缩放选项缩放页面， 。当在同一单元中指定所有内容（图像全部以像素为单位）时，开发您的页面更容易，并且您不必担心复合。 （我被告知不会有数学–有处理必须计算什么1.5em实际上工作。）
对于字体大小只使用相对单位的另一个潜在问题是用户调整大小的字体可能会破坏您的布局的假设。例如，这可能会导致文本被截断或运行时间过长。如果你使用绝对单位，你不必担心突破你的布局的字体大小。
所以我的答案是使用像素单位。我使用 px 一切。当然，你的情况可能会有所不同，如果你必须支持IE6（可能是RFC的神灵怜悯你），你必须使用 em 。
I am designing a new website and I want it to be compatible with as much browsers and browser settings as possible. I am trying to decide what unit of measurement I should use for the sizes of my fonts and elements, but am unable to find a conclusive answer.
My question is: should I use px or rem in my CSS?
- So far I know that using
pxisn't compatible with users who adjust their base font size in their browser. - I've disregarded
ems because they are more of a hassle to maintain, compared torems, as they cascade. - Some say that
ems are resolution independent and therefore more desirable. But others say that most modern browsers zoom all elements equally anyway, so usingpxis not a problem.
I'm asking this because there are a lot of different opinions as to what is the most desirable measure of distance in CSS, and I am not sure which is best.
TL;DR: use px.
The Facts
First, it's extremely important to know that per spec, the CSS
pxunit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the
pxunit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.That said, up until 2010 (and the mobile zoom situation notwithstanding), the
pxalmost always did equal one physical pixel, because all widely available displays were around 96dpi.Sizes specified in
ems are relative to the parent element. This leads to theem's "compounding problem" where nested elements get progressively larger or smaller. For example:body { font-size:20px; } div { font-size:0.5em; }Gives us:
<body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25pxThe CSS3
rem, which is always relative only to the roothtmlelement, is too new to rely on. As of July 2012, around 75% of all browsers in use support therem.
The Opinion
I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.
In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as ems). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px, they wouldn't scale when changing the browser's font size option.
Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.
Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody1 does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).
1 - within statistical error, naturally
If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)
One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.
So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use ems anyway.
这篇关于我应该使用px或rem值单位在我的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
