我应该在我的CSS中使用px或rem值单位吗？
我正在devise一个新的网站，我希望它尽可能多的浏览器和浏览器设置兼容。 我正在尝试确定我应该使用的字体和元素大小的度量单位，但无法find确凿的答案。
我的问题是：我应该在我的CSS中使用px还是rem ？
- 到目前为止，我知道使用
px与在浏览器中调整基本字体大小的用户不兼容。 - 我忽略了
em因为他们更容易维护，相比之下，他们的级联。 - 有人说，
rem是独立的分辨率，因此更可取。 但也有人说大多数现代浏览器无论如何都放大了所有元素，所以使用px不是问题。
我这样问是因为对于CSS中距离最合适的衡量标准有很多不同的观点，我不确定哪个是最好的。
TL; DR：使用px 。
事实
-
首先，知道每个规格的CSS
px单位不等于一个物理显示像素是非常重要的。 这一直是真实的 – 即使在1996年的CSS 1规范 。CSS定义了参考像素 ，它在96 dpi显示上测量一个像素的大小。 在具有与96dpi大致不同的显示器（如Retina显示器）的显示器上，用户代理重新调整
px单位，使其大小与参考像素的大小相匹配。 换句话说，这个重新缩放就是为什么1个CSS像素等于2个物理视网膜显示像素。也就是说，直到2010年（尽pipe移动缩放情况），
px几乎总是等于一个物理像素，因为所有广泛使用的显示器都在96dpi左右。 -
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。
意见
我认为每个人都同意，devise你的网页适合每个人，并考虑视障人士是很好的。 一个这样的考虑（但不是唯一的考虑）是允许用户使您的网站的文本更大，以便更易于阅读。
一开始，向用户提供缩放文本大小的唯一方法是使用相对大小单位（如em ）。 这是因为浏览器的字体大小菜单只是改变了根字体大小。 因此，如果您在px指定了字体大小，则在更改浏览器的字体大小选项时，它们将不会缩放。
现代的浏览器（甚至是不那么现代的IE7）都改变了默认的缩放方法，只是放大一切，包括图像和框的大小。 实质上，它们使参考像素变大或变小。
是的，有人仍然可以改变他们的浏览器默认样式表来调整默认的字体大小（相当于旧式字体大小选项），但这是一个非常深奥的方式去做，我敢打赌，没有人会这样做。 （在Chrome中，它被隐藏在高级设置，网页内容，字体大小下，在IE9中，它更隐藏，你必须按Alt键，然后转到查看，文本大小）。浏览器的主菜单（或使用Ctrl + / - /鼠标滚轮）。
1 – 在统计错误内，自然是
如果我们假定大多数用户使用缩放选项来缩放页面，我发现相关单位大多不相关。 如果在同一个单元中指定了所有内容（图像都是以像素为单位），那么开发页面就容易多了，而且不必担心复合。 （ “我被告知不会有math问题” – 要处理必须计算1.5em的实际工作情况。）
使用相对单位字体大小的另一个潜在问题是，用户resize的字体可能会破坏布局所做的假设。 例如，这可能会导致文本被剪辑或运行时间过长。 如果你使用绝对单位，你不必担心意外的字体大小打破你的布局。
所以我的答案是使用像素单位。 我使用px的一切。 当然，你的情况可能会有所不同，如果你必须支持IE6（可能RFCCs的神对你有怜悯），你将不得不使用em 。
本文很好地描述了px ， em和rem优缺点。
笔者最后得出结论：最好的方法是使用px和rem ，先为旧版浏览器声明px ，然后再为新版浏览器重新声明rem ：
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
我想赞美josh3736的回答 ，提供一些优秀的历史背景。 虽然这个问题已经得到很好的阐述，但在问题提出后的五年中，CSS的格局已经发生了变化。 当问这个问题时， px 是正确的答案，但是今天不再成立。
tl; dr：使用rem
单元概述
历史上， px单元通常代表一个设备像素。 随着像素密度越来越高的设备不再适用于许多设备，例如苹果公司的视网膜显示器。
rem单位代表了它的大小。 这是任何匹配的font-size :root 。 在HTML的情况下，它是<html>元素; 对于SVG，它是<svg>元素。 每个浏览器的默认font-size是16px 。
在撰写本文时， rem约有98％的用户支持 。 如果你担心另外2％的用户，我会提醒你大约98％的用户也支持媒体查询 。
关于使用px
互联网上的大多数CSS例子都使用px值，因为它们是事实上的标准。 和其他各种单位可能在理论上都被使用过，但是他们并没有很好地处理小的价值，因为你很快就需要求助于分数，而分数又比较长，而且难以推理。
如果你想要一个薄边框，使用px你可以使用1px ，而使用pt你需要使用0.75pt来获得一致的结果，这不是很方便。
关于使用rem
rem的默认值16px对于它的使用并不是一个非常有力的论据。 写0.0625rem比写0.75pt 更糟 ，那么为什么会有人使用rem ？
与其他单位相比， rem有两个优势。
- 用户偏好受到尊重
- 您可以将
rem的显着px值更改为任何您想要的值
尊重用户偏好
浏览器缩放多年来发生了很大变化。 从历史上看，许多浏览器只会扩大font-size ，但是当网站意识到他们漂亮的像素完美的devise在任何时候被放大或缩小的时候都会被打破的时候，这种变化非常迅速。 在这一点上，浏览器缩小整个页面，所以基于字体的缩放不在图片中。
尊重用户的愿望并不在于此。 仅仅因为默认情况下浏览器被设置为16px ，并不意味着任何用户都不能将他们的偏好改变为24px或32px来纠正不良视力。 如果您将单位设置为rem ，则任何字体较大的用户都将看到比例较大的网站。 边界越大，填充越大，边际越大，一切就越stream畅。
如果您将媒体查询以rem ，则还可以确保用户看到的网站适合他们的屏幕。 在640px宽的浏览器上将font-size设置为32px 640px的用户将有效地看到您的网站，如在16px 640px宽的浏览器上以16 640pxforms显示给用户。 使用rem RWD绝对没有损失。
改变表观px值
因为rem基于:root的font-size ，所以如果要更改1rem代表的内容，只需更改font-size ：
:root { font-size: 100px; } body { font-size: 1rem; }
<p>Don't ever actually do this, please</p>
作为一个reflection回答，我会build议使用rem，因为它允许您一次更改整个文档的“缩放级别”（如有必要）。 在某些情况下，当你想要大小是相对于父元素，然后使用em。
但 rem支持是不稳定的，IE8需要一个polyfill，Webkit正在展示一个bug。 而且，亚像素计算可能导致诸如一条像素线之类的东西有时会消失。 补救措施是像素代码这样非常小的元素。 这引入了更多的复杂性。
所以，总的来说，问问自己是否值得 – 在CSS中改变整个文档的“缩放级别”有多重要和可能？
对于某些情况，是的，有些情况下不会。
所以，这取决于你的需求，你必须权衡利弊，因为使用rem和em引入了一些额外的考虑与“正常的”基于像素的工作stream程相比。
请记住，将px的CSS切换（或转换）为rem很容易（JavaScript是另一回事），因为以下两块CSS代码会产生相同的结果：
html { } body { font-size:14px; } .someElement { width: 12px; }
html { font-size:1px; } body { font-size:14rem; } .someElement { width: 12rem; }
josh3736的答案是好的，但3年后提供一个对应点：
我build议使用rem单位字体，如果只是因为它使开发人员更容易更改大小。 确实，用户很less在浏览器中更改默认的字体大小，现代浏览器缩放将会扩大px单位。 但是，如果你的老板来找你说“不要放大图像或图标，而是把所有的字体放大”。 只需更改根字体大小，让所有其他字体相对缩放，然后在几十或几百个css规则中更改px大小就会更容易。
我认为对于某些图像使用px单位，或者对于特定的布局元素，无论devise的规模如何，应始终保持相同的大小，这仍然是有意义的。
Caniuse.com可能会说，只有75％的浏览器在2012年发布自己的答案时，但截至3月27日，他们声称支持93.78％ 。 只有IE8不支持它们跟踪的浏览器。
pt与rem类似，因为它相对固定，但几乎总是与DPI无关，即使不符合标准的浏览器以设备依赖的方式处理px也是如此。 rem随着根元素的字体大小而变化，但是你可以使用像Sass / Compass这样的东西来自动使用pt 。
如果你有这个：
html { font-size: 12pt; }
那么1rem总是12点。 rem和em只作为它们所依赖的元素独立于设备; 有些浏览器不符合规范，从字面上px 。 即使在networking的旧时代，1点一直被认为是1/72英寸 – 也就是说，每英寸有72点。
如果您有一个旧的，不兼容的浏览器，并且您有：
html { font-size: 16px; }
那么1rem将会依赖于设备。 对于默认情况下可以从htmlinheritance的元素， 1em也会依赖于设备。 12pt将有望保证与设备无关的等价物： 16px / 96px * 72pt = 12pt ，其中96px = 72pt = 1in 。
如果你想坚持特定的单位，那么做math就会变得相当复杂。 例如.75em of html = .75rem = 9pt .66em of .75em of html = .5rem = 6pt 。 一个好的经验法则：
- 使用
pt的绝对大小。 如果你真的需要这个相对于根元素是dynamic的，那么你就是要求太多的CSS; 你需要一个编译成CSS的语言，比如Sass / SCSS。 - 用
em来表示相对大小。 能够说“我希望左边的边距大约是一个字母的最大宽度”，或者“使这个元素的文字比它的周围环境稍大”，这是非常方便的。<h1>是在ems中使用字体大小的好元素，因为它可能出现在不同的地方，但总是比附近的文本要大。 这样，您就不必为每个应用于h1课程设置单独的字体大小：字体大小将自动调整。 - 使用
px很小的尺寸。 在非常小的尺寸下，pt可以在96 DPI的某些浏览器中变得模糊，因为pt和px不太一致。 如果你只是想创build一个薄的，一个像素的边框，这样说。 如果您的DPI显示较高，在testing过程中对您来说显然不是很明显，因此请务必在某个时候在通用的96-DPI显示屏上进行testing。 - 不要处理子像素，使高DPI显示器上的东西变得有趣。 一些浏览器可能会支持它，特别是在高DPI显示器上，但是这是一个禁忌。 大多数用户喜欢大而清晰，但networking教会我们开发者，否则。 如果你想用最先进的屏幕为你的用户添加扩展细节，你可以使用vectorgraphics（阅读：SVG），你应该这样做。
我发现编制网站字体大小的最好方法是为body定义一个基本字体大小，然后使用em（或rem）作为我在之后声明的每个其他font-size 。 这是我个人的偏好，但是它给了我很好的服务，并且使得构build更加灵敏的devise变得非常简单。
就使用rem单元而言，我认为在你的代码中渐进性之间find一个平衡点是很好的，但是也可以为旧的浏览器提供支持。 看看这个关于浏览器支持rem单元的链接 ，这将有助于您的决定。
是。 或者，而不是。
呃，我的意思是，没关系。 使用适合您的特定项目的那个。 PX和EM，或两者同样有效，但会根据整个页面的CSS架构而有所不同。
更新：
为了澄清，我说通常它可能无关紧要你使用。 有时候，你可能特别想select一个。 如果您可以从头开始，并希望使用基本字体大小，并使所有相关的东西，EMs是很好的。
当您将重新devise改造到现有的代码库时，通常需要PX，并且需要px的特殊性来防止错误的嵌套问题。
他们是前进的方向，不仅仅是字体，但你可以使用他们的箱子，线条粗细和其他的东西，为什么？
简单地说，em是唯一与缩放浏览器中的alt +和alt键一致的缩放。
其他衡量尺度，但不像他们一样干净。
在附注中，如果你想得到最好的缩放比例，也可以将你的graphics转换为基于vector的SVG，如果可能的话，这些也将随着浏览器缩放比例的变化而变化。
新闻媒体是处理+/-缩放的媒体查询的唯一标准，人们总是这样做，而不仅仅是盲人。 这是另一个写得很好的专业演示为什么这很重要。
顺便说一下，这就是Zurb基金会使用ems的原因 ，而劣质的Bootstrap 3仍然使用像素。
