我设计一个新的网站，我想这是尽可能多的浏览器和浏览器设置尽可能兼容。 我试图决定我应该用什么计量单位为我的字体和元件的尺寸，但我无法找到令人信服的答案。
我的问题是：我应该使用px或rem在我的CSS？
px是不是谁在浏览器中调整自己的基本字体大小的用户兼容。 em是因为他们更麻烦来维持的，相比于rem S，因为它们级联。 rem s为分辨率无关，因此更可取。 但也有人说，大部分现代浏览器缩放的所有元素同样无论如何，所以使用px是没有问题的。 我问这是因为有很多不同的意见，什么是在CSS中距离的最可取的措施，我不知道这是最好的。
TL; DR：使用px 。
首先，这是非常重要的是要知道， 每规范 ，CSS的px单元不等于一个物理显示像素。 这一直是真实的-即使是在1996年CSS 1个规范 。
CSS定义了参考像素 ，其测量一个96 DPI显示器上的像素的大小。 上具有基本上DPI不同于96DPI（如视网膜显示器）的显示器，所述用户代理重新缩放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％ 。
我认为每个人都同意，这是很好的设计你的页面被容纳到每个人，并为视障人士考虑。 一个这样的考虑（但不是唯一的一个！）是允许用户以使您的网站的文字变大，使之更易于阅读。
在开始的时候，为用户提供一种方式来缩放文本大小的唯一方法是通过使用相对大小单位（如em S）。 这是因为浏览器的字体大小菜单简单地改变根的字体大小。 因此，如果你在指定的字体大小px ，他们不会改变浏览器的字体大小选项时，需要提升。
现代浏览器（甚至是不那么现代IE7）的所有更改默认缩放方法简单放大的一切，包括图像和箱尺寸。 本质上，它们使参考像素更大或更小。
是的，有人仍然可以改变自己的浏览器默认样式表来调整默认字体大小（旧式字体大小选项的等价物），但是这是绕了一个非常深奥的方式，我敢打赌没有人1做的。 （在Chrome中，它是在高级设置，Web内容，字体大小埋葬。在IE9中，它更隐蔽，你必须按下Alt键，然后转到浏览，文本大小。）这是很容易，只是选择在缩放选项浏览器的主菜单（或使用Ctrl + + / - /鼠标滚轮）。
统计误差范围内，自然- 1
如果我们假设使用缩放选项大多数用户规模的网页，我觉得相对单位大多是无关紧要的。 这是很容易当在同一单元（图像中的像素都处理）被指定一切都发展自己的页面，你不必担心复利。 （“我被告知不会有数学” -有处理有算得了什么1.5em实际工作出来。）
只使用相对单位字体大小的另外一个潜在的问题是，用户调整字体可能会打破你的假设布局使得。 例如，这可能会导致文本得到修剪或运行时间太长。 如果使用绝对单位，您不必担心破坏您的布局出乎意料的字体大小。
所以，我的答案是使用像素为单位。 我用px的一切。 当然，你的情况可能会有所不同，如果你必须支持IE6（可在RFC的众神怜悯你），你将不得不使用em反正秒。
我想赞扬josh3736的答案提供一些优秀的历史背景。 虽然它的明确阐述，CSS的格局已经在近五年来改变，因为这问题是问。 当这个问题被问， px 是正确的答案，但今天已不再适用。
TL;博士：使用rem
从历史上看px单元通常表示的一个设备像素。 通过具有越来越高的像素密度，此不再适用于许多设备，如苹果的视网膜显示设备。
rem单位代表将R OOT EM大小。 这是font-size的任何比赛:root 。 在HTML的情况下，它的<html>元件; 对于SVG，它是<svg>元素。 默认的font-size在每个浏览器*为16px 。
在写这篇文章的时候， rem是通过用户的约98％的人支持 。 如果你担心，其他2％，我会提醒你， 媒体查询也受到用户的约98％的人支持 。
px 在互联网上使用的大多数的CSS实例px值，因为他们是事实上的标准。 pt ， in和各种各样的其他单位可能已经在理论中，但他们没有处理小值，以及你很快就需要求助于分数，这是更长的时间来输入，更难以推理。
如果你想要一个细边框，与px你可以使用1px ，与pt你需要使用0.75pt获得一致的结果，这只是不是很方便。
rem rem的默认值16px不是它的使用非常有力的论据。 写0.0625rem比写更糟糕 0.75pt ，那么为什么会有人使用rem ？
有两个部分，以rem的优势超过其他单位。
px的值rem你想什么 浏览器缩放多年来发生了很大变化。 历史上许多浏览器只会扩大font-size ，但改变很迅速，当网站意识到，他们的美丽像素完美的设计被打破放大或缩小任何时候有人。 在这一点上，浏览器缩放整个页面，因此基于字体缩放是出来的图片。
尊重用户的意愿不出来的照片。 仅仅因为一个浏览器设置为16px在默认情况下，并不意味着任何用户不能更改自己的喜好来24px或32px来纠正视力不良。 如果你的基础单位关闭的rem ，以较高的字体大小的任何用户将看到一个较大比例的网站。 边框会更大，填充会更大，利润会更大，一切都会流体扩大。
如果立足于媒体查询rem ，也可以确保用户看到的网站适合自己的屏幕。 与用户font-size设置为32px在640px宽的浏览器，将有效地看到您的网站显示给用户，以16px在320px宽的浏览器。 有绝对不使用损失RWD rem 。
px值因为rem是基于font-size的的:root结点，如果你想改变什么1rem代表，你所要做的就是改变font-size ：
:root { font-size: 100px; } body { font-size: 1rem; } <p>Don't ever actually do this, please</p> 不管你做什么，不要设置:root元素的font-size的px值。
如果你设置font-size在html的px值，你已经干掉了用户的偏好，而不用一个办法让他们回来。
如果你想改变的表面价值rem ，用%的单位。
这样做的数学是相当直接的。
表观字体大小:root是16px ，但可以说，我们希望将它更改为20px 。 所有我们需要做的就是乘16的一些价值得到20 。
设置你的公式：
16 * X = 20
并求解X ：
X = 20 / 16
X = 1.25
X = 125%
:root { font-size: 125%; } <p>If you're using the default font-size, I'm 20px tall.</p> 在倍数千方百计20是不是所有的伟大的，但一个共同的建议是使的外观尺寸rem等于10px 。 神奇的数字因为这是10/16这是0.625 ，或62.5%
:root { font-size: 62.5%; } <p>If you're using the default font-size, I'm 10px tall.</p> 现在的问题是，您的默认font-size的页面的其余部分被设置方式太小，但有应该是一个简单的修复：设置font-size的body采用rem ：
:root { font-size: 62.5%; } body { font-size: 1.6rem; } <p>I'm the default font-size</p> 要注意，这种调整到位是很重要的，表观值rem是10px ，这意味着你可能已经写在任何值px可以直接转换到rem通过撞上一个小数位。
padding: 20px;
变成
padding: 2rem;
您选择的外观字体大小是你的，所以如果你想没有理由不能使用：
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
并有1rem等于1px 。
所以，如果你拥有它，一个简单的解决方案，以尊重用户的意愿，同时也避免过于复杂的CSS。
我怕你可能会问那。 虽然我想假装rem是魔术和解决，所有的东西，还有注意的一些问题。 没有成交，打破了我的意见 ，但我会叫他们，所以你不能说我没提醒你。
一个你会碰到与第一问题rem涉及媒体查询。 考虑下面的代码：
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
这里的价值rem视传媒查询是否适用的变化，和媒体查询取决于价值rem ，所以这到底是怎么回事？
rem在媒体查询使用的初始值font-size ，不考虑到可能发生的任何改变font-size的的:root元素。 换句话说，这是明显的价值永远是16px 。
这是一个有点恼人，因为这意味着你必须做一些分数的计算，但我发现，最常见的媒体查询已使用16的倍数值。
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
此外，如果您使用的是CSS预处理器，你可以使用混入或变量来管理您的媒体查询，这将完全掩盖了问题。
如果项目的各种不同的项目之间进行切换，这是相当有可能的外观字体大小rem会有不同的值。 在一个项目中，你可能会使用表观大小10px地方在另一个项目的外观尺寸可能是1px 。 这会引起混乱，并导致问题。
我这里只是建议与坚持62.5%转换rem到表观大小10px ，因为已经在我的经验已经比较普遍。
如果你正在写的将是在网站上，你不控制，如一个嵌入的小部件使用CSS，有真正知道什么明显的大小没有什么好办法rem都会有。 如果是这样的情况下，随时使用，以保持px 。
如果你仍然想使用rem不过，考虑释放萨斯或样式表的LESS版本的变量来覆盖的外观尺寸缩放rem 。
*我不想惊吓任何人使用远rem ，但我一直没能正式确认， 每一个浏览器使用16px默认。 你看，有很多浏览器，它不会那么难了一个浏览器曾经分歧非常轻微，比如说15px或18px 。 在测试中，但是我还没有看到一个例子，其中在使用默认设置系统使用默认设置的浏览器有以外的值16px 。 如果你找到了这样一个例子，请与我分享。
本文介绍了相当不错的利弊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 */
作为反射的答案，我会建议使用REM，因为它允许您一次改变整个文档的“缩放级别”，如果需要的话。 在某些情况下，当你想要的大小是相对父元素，然后使用他们。
但 REM的支持是参差不齐，IE8需要填充工具，和Webkit展出了错误。 此外，子像素的计算可导致东西，如一个像素线有时会消失。 补救的办法是在像素代码，这样非常小的元素。 这引入了更多的复杂性。
因此，总体而言，问问自己是否值得 - 这是多么的重要，并可能更改CSS中的整个文档的“缩放级别”？
对于某些情况下，这是肯定的，对于某些情况下这将是否定的。
所以，这取决于你的需求，你必须重利弊，因为使用REM和EM介绍比较“正常”的基于像素的工作流程的一些额外的考虑。
请记住，它很容易从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年后，以提供一个对应物：
我建议使用rem单位的字体，如果仅仅是因为它使你更容易，开发，改变大小。 这是真的，用户很少在他们的浏览器更改默认字体大小，而现代浏览器缩放将扩大px单位。 但是，如果你的老板来对你说“不放大的图像或图标，但让所有的字体更大”。 这是很容易，只是改变根的字体大小，让所有其他字体缩放相对于这一点，那么改变px中的数十或数百的CSS规则的大小。
我认为它还是有意义的使用px单位的一些图像，或对某些布局元素，应始终是相同的大小，无论设计的规模。
Caniuse.com可能会说，只有75％的浏览器时josh3736张贴了他的答案在2012年，但由于3月27日，他们声称93.78％的支持率 。 只有IE8不支持它，他们跟踪的浏览器之一。
我发现一个网站的字体大小编程最好的方法是定义为一个基本字体大小body ，然后用EM（或REM的）每隔font-size我后声明。 这是个人喜好，我想，但它使我受益匪浅，也使得它很容易集成更响应式设计 。
至于使用REM单位去，我觉得这是很好的找到代码中是渐进之间的平衡，而且还提供了对旧版浏览器的支持。 退房有关REM单位浏览器支持这个环节 ，应该帮助了一个良好的数额上你的决定。
pt类似于rem的，因为它是相对固定的，但几乎总是DPI无关，即使不符合标准的浏览器把px在与设备相关的时尚。 rem根元素的字体大小各不相同，但你可以使用类似萨斯/罗盘与自动执行此pt 。
如果你有这样的：
html {
font-size: 12pt;
}
然后1rem总是被12pt 。 rem和em是仅作为独立于设备的作为所依赖的元素; 根据规范一些浏览器不规矩，并把px从字面上。 即使是在网络的旧时代，1点被一致认为是72英寸 - 也就是说，有一英寸72点。
如果你有一个旧的，不符合标准的浏览器，您有：
html {
font-size: 16px;
}
然后1rem将是依赖于设备的。 对于将从继承元件html默认1em也将是依赖于设备的。 12pt将是希望保证设备无关当量： 16px / 96px * 72pt = 12pt ，其中96px = 72pt = 1in 。
它可以变得相当复杂，以做数学题，如果你要坚持到具体单位。 例如， .75em of html = .75rem = 9pt ，和.66em of .75em of html = .5rem = 6pt 。 一个好的经验法则：
pt绝对大小。 如果你真的需要这个相对于根元素的动态是，你要价太高了CSS的; 你需要编译为CSS，像萨斯/ SCSS的语言。 em的相对大小。 这是非常方便的，能够说，“我想在左边的利润率约为一个字母的最大宽度，”或者，“让比其周围这个元素的文本只是有点大。” <h1>是在其上EMS使用的字体大小，因为它可能会出现在不同的地方，但应该总是比附近的文字变大了良好的元素。 这样，您不必具有该套用至每个类别的单独的字体大小h1 ：字体大小会自动适应。 px为非常小的尺寸。 在非常小的尺寸， pt可以在96 DPI获得一些浏览器模糊，因为pt和px不太排队。 如果你只是想创建一个瘦，一个像素的边框，这样说。 如果你有一个高DPI显示，这不会在测试过程中是显而易见的你，所以一定在某个点来测试一个通用的96 DPI显示器上。 一半（但只有一半）感到讽刺的回答（另一半是官僚机构的现实的苦涩不屑）：
使用VH
一切总是大小以浏览器窗口。
总是允许向下滚动，从来没有到一边。
设置车身宽度为静态50vh，并没有什么浮动或跳出父DIV的。 和款式只有使用表格所以一切都是刚性保持到位预期。 包括javascript函数撤消任何CTRL +/-活动的用户可以做的。
每个人都会恨你，除了谁告诉你把事情匹配其模拟了人，他们会欣喜若狂。 每个人都知道他们的意见是唯一重要的一个。
是。 或者说，没有。
呃，我的意思是，它并不重要。 使用一个有意义的特定项目。 PX和EM或两者同样有效，但会表现得有点不同，这取决于你的整个页面的CSS架构。
更新：
为了澄清，我指出，通常它可能并不重要你使用。 有时候，你可能特别希望选择一个比其他。 新兴市场是很好，如果你可以从头开始，要使用基本字体大小，使一切相对于这一点。
当你改造了重新设计到现有的代码库，并需要PX的特殊性，防止坏的嵌套问题，往往需要P-XS。
EM的是前进的方向，不只是字体，但你可以用盒子，线条粗细和其他的东西也使用它们，为什么呢？
简单地说EM的是，在与浏览器的缩放Alt +和ALT-键异口同声地缩放唯一的。
其他测量的规模，但不是作为干净作为他们。
。如果要在缩放的最好一个侧面说明，也将您的图形基于向量的SVG在可能情况下也因为这些也将干净规模与浏览器放大比率。
新兴市场是可以扩展为处理+/-缩放媒体查询，里面的人做所有的时间，而不仅仅是盲目的人的唯一的事。 这里还有一个写得很好的，为什么这个重要的专业演示。
顺便说一句，这就是为什么Zurb Foundation使用EMS ，而下半引导3依旧采用像素。
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 疯言疯语 的文章《我应该使用像素或REM单位价值在我的CSS？(Should I use px or rem valu》','https://www.manongdao.com/article-967414.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}