我应该在CSS中使用px或rem值单位吗？
345 html css distance units-of-measurement css3
我正在设计一个新网站,我希望它与尽可能多的浏览器和浏览器设置兼容.我正在尝试确定我应该使用哪种测量单位来确定字体和元素的大小,但我无法找到确定的答案.
我的问题是:我应该使用px还是rem在我的CSS中使用？
- 到目前为止,我知道使用
px与在浏览器中调整基本字体大小的用户不兼容. - 我忽视了
ems,因为与rems 相比,它们更难以维持,因为它们是级联的. - 有人说
rems与分辨率无关,因此更为理想.但是其他人说大多数现代浏览器无论如何都会平等地缩放所有元素,因此使用px不是问题.
我问这个是因为对于CSS中最理想的距离测量有很多不同的看法,我不确定哪个是最好的.
jos*_*736 397
TL; DR:使用px.
事实
首先,知道每个规格,CSS
px单元不等于一个物理显示像素是非常重要的.这一直是真的 - 即使在1996年的CSS 1规范中也是如此.CSS定义参考像素,用于测量96 dpi显示器上像素的大小.在dpi基本上不同于96dpi的显示器上(如Retina显示器),用户代理重新调整
px单元,使其大小与参考像素的大小相匹配.换句话说,这种重新缩放正是1个CSS像素等于2个物理Retina显示像素的原因.也就是说,直到2010年(尽管有移动变焦的情况),
px几乎总是等于一个物理像素,因为所有广泛使用的显示器都是96dpi左右.ems中指定的大小是相对于父元素的.这导致了em"复合问题",其中嵌套元素逐渐变大或变小.例如:
Run Code Online (Sandbox Code Playgroud)body { font-size:20px; } div { font-size:0.5em; }给我们:
Run Code Online (Sandbox Code Playgroud)<body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25px现在,96%的所有浏览器都支持CSS3
rem,它总是只相对于根html元素.
意见
我想每个人都同意,设计你的页面以适应每个人,并考虑视障人士是好的.其中一个考虑因素(但不是唯一的考虑因素!)允许用户使您网站的文字更大,以便更容易阅读.
在开始时,为用户提供缩放文本大小的方法的唯一方法是使用相对大小单位(例如ems).这是因为浏览器的字体大小菜单只是改变了根字体大小.因此,如果您指定了字体大小px,则在更改浏览器的字体大小选项时,它们将无法缩放.
现代浏览器(甚至是不那么现代的IE7)都将默认缩放方法改为简单地放大所有内容,包括图像和盒子大小.实质上,它们使参考像素变大或变小.
是的,有人仍然可以改变自己的浏览器默认样式表来调整默认字体大小(旧式字体大小选项的等价物),但是这是绕了一个非常深奥的方式,我敢打赌没有人1做的.(在Chrome中,它隐藏在高级设置,Web内容,字体大小.在IE9中,它更加隐藏.您必须按Alt键,然后转到视图,文本大小.)选择缩放选项更容易浏览器的主菜单(或使用Ctrl+ +/ -/鼠标滚轮).
1 - 在统计误差范围内,自然而然
如果我们假设大多数用户使用缩放选项缩放页面,我发现相对单位大多不相关.当在同一单元中指定所有内容(图像都以像素为单位处理)时,开发页面要容易得多,而且您不必担心复合.("我被告知不会有数学" - 有必要计算1.5em的实际效果.)
仅使用相对单位表示字体大小的另一个潜在问题是,用户调整大小的字体可能会破坏您的布局所做的假设.例如,这可能会导致文本被裁剪或运行时间过长.如果使用绝对单位,则不必担心意外的字体大小会破坏布局.
所以我的答案是使用像素单位.我px用于一切.当然,您的情况可能会有所不同,如果您必须支持IE6(可能是RFC的众神怜悯您),您仍然必须使用ems.
- 我对这个论点的大狡辩是,在调整响应断点时调整字体大小和间距,你可以在html元素上设置一个新的字体大小,你在rem中设置的每个测量都会自动调整,而使用px你需要编写您想要调整的每个测量的新规则.当然,即使使用rem也可能需要进行更多的调整,但是通过巧妙的计划,您可以免费获得大量的比例缩放.将某些盒子间距测量与类型,更轻的代码和更低的复杂性/更多的可维护性联系起来等于对我来说是一个明显的获胜. (59认同)
- 你应该使用像素和rem.所以较新的浏览器得到了rem,旧的浏览器又回归像素(就像WordPress 2012那样).这可以使用Sass或Less自动进行,因此您只需输入px值并自动输出px和rem. (41认同)
- 对此进行跟进会很棒.Rem目前处于95%以上的支持率. (16认同)
- 假设没有用户更改,字体大小设置非常大胆.此类索赔应以数据为后盾.否则它只是疏远一些已经脆弱的用户(严重视力受损的用户)的一种方式.如果可以,请使用rem而不是px.IMO,应用程序应该能够独立扩展其界面和字体大小."只是使用px"是许多开发人员想要听到的ems问题,但它不是网络的正确答案. (13认同)
- 错了,我不关心IE(没人应该). (6认同)
- 所有这些都是雄辩的,性感的,准确的.很好的答案. (3认同)
- 这是一个很棒的答案.谢谢你的细节! (2认同)
zzz*_*Bov 158
我想赞扬josh3736提供一些优秀历史背景的答案.虽然它很清晰,但自从提出这个问题以来,近五年来CSS的格局发生了变化.当问到这个问题时,答案px 是正确的,但今天不再适用.
tl;博士:使用rem
单位概述
历史上,px单位通常表示一个设备像素.对于具有越来越高像素密度的设备,这种设备不再适用于许多设备,例如Apple的Retina Display.
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-sizeon 设置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是神奇的并且解决所有问题,但仍然存在一些值得注意的问题.在我看来,没有任何破坏性的东西,但我会打电话给你,所以你不能说我没有警告你.
媒体查询
您将遇到的第一个问题em涉及媒体查询.请考虑以下代码:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
这里的rem变化值取决于媒体查询是否适用,媒体查询取决于它的值rem,那么究竟是怎么回事？
rem在媒体查询中使用初始值,rem并且不考虑可能发生font-size在font-size元素上的任何更改.换句话说,它的表面价值总是如此 :root.
这有点烦人,因为这意味着你必须做一些小数计算,但我发现大多数常见的媒体查询已经使用了16的倍数值.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
此外,如果您使用的是CSS预处理器,则可以使用mixins或变量来管理媒体查询,这将完全掩盖问题.
上下文切换
如果您在项目之间切换各种不同的项目,很可能表观字体大小16px将具有不同的值.在一个项目中,您可能正在使用表观大小:root,在另一个项目中的表面大小可能是rem.这可能会造成混淆并导致问题.
我在这里唯一的建议是坚持:root转换em为表观大小rem,因为这在我的经验中更为常见.
共享的CSS库
如果您正在编写将在您无法控制的网站上使用的CSS,例如嵌入式窗口小部件,那么确实没有什么好方法可以知道它的外观尺寸10px.如果是这种情况,请随时继续使用1px.
如果您仍想使用62.5%,请考虑使用变量释放样式表的Sass或LESS版本,以覆盖表观大小的缩放rem.
*我不想让任何人远离使用10px,但我无法正式确认每个浏览器rem默认使用.你看,有很多浏览器,对于一个浏览器而言,如果稍微偏离,比如说px或者说它们就不会那么困难了rem.然而,在测试中,我还没有看到一个示例,其中使用默认设置的系统中使用默认设置的浏览器具有除了之外的任何值rem.如果您找到这样的例子,请与我分享.
- 所以你关于为什么我们应该使用 rem 的论点是这样我们可以适应那些选择使用非标准方法缩放浏览器内容的用户，然后在同一篇文章中你说我们不适应那 2% 的人是可以的谁的浏览器只支持“px”？使用放大网页的人所占的比例很小，并且进行缩放并更改根字体大小的人的比例也很小，可能远低于 2% 的人。没有意义？你说我们应该容纳天文数字般的一小部分人，却又忽略了2%的人使用rem (14认同)
- 您甚至继续列出仅在使用 rem 时出现的多个问题，而在使用 px 时则不会出现这些问题。这是一篇令人信服的文章，说明了为什么你不应该使用 rem（如果有的话）。在整篇文章中确实没有一个令人信服的理由不使用“px”。 (6认同)
- @Ampersanda,在JavaScript中你很可能会使用计算像素值.我的建议是在可能的情况下切换类,以便CSS可以管理事物的外观.对于某些事情,您将无法避免使用JS来计算像素值,因此最好的办法是从DOM状态计算像素值. (3认同)
- **1rem 等于 1px** 由于 Chrome 的最小字体大小，这会导致麻烦：/sf/ask/3106506511/ -rem /sf/ask/1694055821/ (3认同)
- 值得注意的是，当字体大小更改时，Firefox/Gecko 不会缩放边框宽度的“px”值，但如果您在“rem”中定义边框宽度，这些值将会缩放。在某些情况下，这可能会影响您要使用的单位。不过，Chrome/Blink 总是会同时缩放两者。 (2认同)
uzy*_*zyn 42
本文介绍了相当不错的优点和缺点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 感兴趣的原因。我不明白的两件事：他只建议将其作为字体（而非元素）的度量单位，如果我正确理解他，使用 (r)em 的唯一真正原因是 IE 用户可以调整文本大小？ (2认同)
- 无法保证62.5%= 10px等值.仅当浏览器的默认字体大小设置为16px时才适用.虽然这是默认设置,但不能保证. (2认同)
- 任何梳理这里所有答案并试图完全理解问题的人都应该阅读这些文章：https://medium.com/@sascha.wolff/dont-use-rem-em-for-paddings-margins-and -more-94e19026b000 https://mindtheshift.wordpress.com/2015/04/02/rip-rem-viva-css-reference-pixel/ 非常重要的一点IMO：**“用户有两个选项来配置浏览器根据个人喜好...你可以通过让一个选项看起来与另一个选项完全相同来窃取一个选项。如果有人说他们只是想让文本更大而不是其他所有内容，那么他们是有原因的。“** (2认同)
Jer*_*yal 19
是的，REM 和 PX 是相对的，但其他答案建议通过 PX 选择 REM，我还想使用可访问性示例来支持这一点。
当用户在浏览器上设置不同的字体大小时，REM 会自动放大和缩小网页上的字体、图像等元素，而 PX 则不是这种情况。
在下面的 gif 中，左侧文本使用字体大小 REM 单位设置，而右侧字体由 PX 单位设置。
如您所见，当我调整网页的默认字体大小时，REM 会自动放大/缩小。（右下侧）
网页的默认字体大小为 16px 等于 1 rem（仅适用于默认 html 页面 ie html{font-size:100%}），因此，1.25rem 等于 20px。
PS：还有谁在使用 REM？CSS 框架！像 Bootstrap 4、Bulma CSS 等，所以最好与它相处。
- 抱歉我亲爱的@JohnCulviner。如果您想一次又一次地打扰视力受损的用户，在浏览每个网站时必须通过捏合来放大或敲击键盘，那么您是对的。但浏览器中的字体大小设置是最常用的辅助功能之一，它恰恰减轻了此类用户的负担并简化了他们的生活。 (7认同)
- 缩放 html 的 font-size 属性，所有 em/rem 都与像素相关，但与像素无关。尝试缩放浏览器 +/-，这就是任何类型的可访问性用例都会做的事情。字体确实变大变小。破解 font-size: % 与现代浏览器中的可访问性完全无关。 (2认同)
作为一个反射答案,我建议使用rem,因为它允许您在必要时立即更改整个文档的"缩放级别".在某些情况下,当您希望大小相对于父元素时,请使用em.
但是 rem支持是不稳定的,IE8需要一个polyfill,而Webkit正在展示一个bug.此外,子像素计算可能导致诸如一条像素线之类的事物有时会消失.解决方法是为这些非常小的元素编码像素.这引入了更多的复杂性.
总的来说,问问自己是否值得 - 你在CSS中改变整个文档的"缩放级别"有多重要和可能？
对于某些情况,这是肯定的,在某些情况下它不会.
因此,它取决于您的需求,并且您必须权衡利弊,因为与"普通"基于像素的工作流程相比,使用rem和em引入了一些额外的考虑因素.
请记住,很容易将CSS从px切换(或者转换)为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 在 2012 年 josh3736 发布他的回答时可能说只有 75% 的浏览器，但截至 3 月 27 日，他们声称支持 93.78%。在他们跟踪的浏览器中，只有 IE8 不支持它。
- [本文](https://medium.com/@sascha.wolff/dont-use-rem-em-for-paddings-margins-and-more-94e19026b000) 的一个 **破坏交易** (imo) 的观点):_用户有两个选项可以根据个人喜好配置浏览器...您可以通过让一个选项看起来与另一个选项完全相同来窃取其中一个选项。如果有人说他们只是想要更大的文本而不是其他任何东西，他们是有原因的。_作为设计师，我们倾向于使用全 REM，这样无论用户的文本大小如何，一切看起来都很好。但如果我们这样做，两个选项（缩放级别和文本大小）基本上变得相同，从而消除了控制 (3认同)