我应该在CSS中使用px或rem值单位吗?

时间:2012-08-03 15:59:26

标签: html css css3 distance units-of-measurement

我正在设计一个新网站,我希望它与尽可能多的浏览器和浏览器设置兼容。我正在尝试确定我应该使用哪种测量单位来确定字体和元素的大小,但我无法找到确定的答案。

我的问题是:我应该在CSS中使用px还是rem

  • 到目前为止,我知道使用px与在浏览器中调整基本字体大小的用户不兼容。
  • 我忽略了em,因为与rem相比,它们更难以维持,因为它们会级联。
  • 有人说rem s与分辨率无关,因此更为理想。但其他人说,大多数现代浏览器无论如何都会平均缩放所有元素,因此使用px不是问题。

我之所以这样问,是因为对CSS中最理想的距离测量有很多不同的看法,我不确定哪种方法最好。

12 个答案:

答案 0 :(得分:385)

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中指定的大小是与父元素相对的 。这会导致em的“复合问题”,其中嵌套元素逐渐变大或变小。例如:

    body { font-size:20px; } 
    div { font-size:0.5em; }
    

    给我们:

    <body> - 20px
        <div> - 10px
            <div> - 5px
                <div> - 2.5px
                    <div> - 1.25px
    
  • 现在96% 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

答案 1 :(得分:139)

我想赞扬josh3736's answer提供一些优秀的历史背景。虽然它的表达清晰,但自从提出这个问题以来,近五年来CSS的格局发生了变化。当问到这个问题时,px 正确答案,但今天不再适用。

tl; dr:使用rem

单元概述

历史上px单位通常代表一个设备像素。对于具有越来越高像素密度的设备,这种设备不再适用于许多设备,例如Apple的Retina Display。

rem单位表示 r em 大小。它是匹配font-size的{​​{1}}。对于HTML,它是:root元素;对于SVG,它是<html>元素。每个浏览器*中的默认<svg>font-size

在撰写本文时,rem is supported by approximately 98% of users。如果您担心其他2%,我会提醒您media queries are also supported by approximately 98% of users

使用16px

互联网上的大多数CSS示例使用px值,因为它们是事实上的标准。理论上使用了pxpt以及其他各种 单元,但由于您需要快速处理小值,因此它们无法处理小值采用分数更长的分数,更难以推理。

如果你想要一个细边框,in可以使用px1px,你需要使用pt来获得一致的结果,那个&{ #39; s不太方便。

使用0.75pt

rem的默认值rem并不是一个非常强大的论据。写16px 更糟而不是写0.0625rem,那么为什么有人会使用0.75pt

rem优于其他单位的两个部分。

  • 尊重用户偏好
  • 您可以将rem的明显px值更改为您喜欢的任何内容

尊重用户首选项

多年来,浏览器缩放发生了很大变化。从历史上看,许多浏览器只能扩展rem,但当网站意识到他们美丽的像素完美设计在任何人放大或缩小时都会破坏时,这种情况发生了很大变化。此时,浏览器会缩放整个页面,因此基于字体的缩放是不可能的。

尊重用户的愿望并非如此。仅仅因为默认情况下浏览器设置为font-size,并不意味着任何用户都无法将其偏好设置更改为16px24px以纠正不良视力。如果您的单位基于32px,则任何字体较大的用户都会看到比例较大的网站。边界将更大,填充将更大,利润将更大,一切都将流畅地扩大。

如果您的媒体查询基于rem,您还可以确保用户看到的网站适合他们的屏幕。在rem广告浏览器上将font-size设置为32px的用户,有效地看到您的网站在640px广16px处向用户显示浏览器。使用320px时,RWD绝对没有损失。

更改显示rem

由于px基于rem节点的font-size,如果您想要更改:root代表的内容,您只需要更改{{} 1}}:

&#13;
&#13;
1rem
&#13;
font-size
&#13;
&#13;
&#13;

无论您做什么,都不要将:root { font-size: 100px; } body { font-size: 1rem; }元素的<p>Don't ever actually do this, please</p>设置为:root值。

如果您将font-size上的px设置为font-size值,则无法让用户取消用户的偏好。<\ n / p>

如果您想更改html明显值,请使用px单位。

对此的数学计算是相当直接的。

rem的明显字体大小为%,但我们可以将其更改为:root。我们需要做的就是将16px乘以某个值,以获得20px

设置等式:

16

解决20

16 * X = 20

&#13;
&#13;
X
&#13;
X = 20 / 16
X = 1.25
X = 125%
&#13;
&#13;
&#13;

:root { font-size: 125%; }的倍数执行所有操作并不是很好,但一个常见的建议是使<p>If you're using the default font-size, I'm 20px tall.</p>的表观大小等于20。这个神奇的数字是rem10px10/16

&#13;
&#13;
0.625
&#13;
62.5%
&#13;
&#13;
&#13;

现在的问题是,您网页其余部分的默认:root { font-size: 62.5%; }设置得太小,但有一个简单的解决办法:在{{1}上设置<p>If you're using the default font-size, I'm 10px tall.</p>使用font-size

&#13;
&#13;
font-size
&#13;
body
&#13;
&#13;
&#13;

值得注意的是,通过此调整,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;

所以你有它,一个简单的解决方案,以尊重用户的意愿,同时也避免过度复杂的CSS。

等等,那捕获的是什么?

我害怕你可能会问这个问题。尽管我想假装:root { font-size: 6.25%; } body { font-size: 16rem; } 是神奇的并且解决了所有事情,但仍然存在一些值得注意的问题。在我看来没有什么特别突破 ,但我会打电话给你,所以你不能说我没有警告过你。

媒体查询

您与1rem遇到的第一个问题涉及媒体查询。请考虑以下代码:

1px

此处rem的值会根据媒体查询是否适用而更改,而媒体查询取决于rem的值,那么究竟是怎么回事?

媒体查询中的

:root { font-size: 1000px; } @media (min-width: 1rem) { :root { font-size: 1px; } } 使用rem的初始值,并未考虑rem元素的rem可能发生的任何更改。换句话说,它的表观值总是 font-size

这有点烦人,因为这意味着你必须进行一些小数计算,但我发现大多数常见的媒体查询已经使用了16的倍数值。

font-size

此外,如果您正在使用CSS预处理器,则可以使用mixins或变量来管理媒体查询,这将完全掩盖问题。

上下文切换

如果您在不同项目的项目之间切换,:root的明显字体大小很可能会有不同的值。在一个项目中,您可能使用16px的表观大小,而在另一个项目中,表观大小可能为| px | rem | +------+-----+ | 320 | 20 | | 480 | 30 | | 768 | 48 | | 1024 | 64 | | 1200 | 75 | | 1600 | 100 | 。这可能会造成混淆并导致问题。

我这里唯一的建议是坚持rem10px转换为1px的表观大小,因为根据我的经验,这种情况更为常见。

共享CSS库

如果您正在编写将要在您无法控制的网站上使用的CSS,例如嵌入式小部件,那么真的没有好办法知道明显的大小62.5%会有多少。如果是这种情况,请随时继续使用rem

如果您仍想使用10px,请考虑使用变量释放样式表的Sass或LESS版本,以覆盖rem的表观大小的缩放。

*我不想让任何人使用px,但我还没有能够正式确认每个浏览器使用{ {1}}默认情况下。你知道,有很多浏览器,对于一个浏览器而言,如果稍微偏离,比如说remrem,那就不会那么困难了。然而,在测试中,我没有看到一个示例,其中使用默认设置的系统中使用默认设置的浏览器具有除rem之外的任何值。如果您找到这样的例子,请与我分享。

答案 2 :(得分:41)

This article很好地描述了pxemrem的优点和缺点。

作者最后得出的结论是,最好的方法可能是同时使用pxrem,先为旧浏览器声明px,然后为新浏览器重新声明rem:< / p>

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

答案 3 :(得分:7)

作为一个反射答案,我建议使用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;
}

答案 4 :(得分:2)

josh3736的答案很好,但3年后提供了一个对应点:

我建议使用rem个字体作为字体,只是因为它使开发人员更容易改变大小。用户很少在浏览器中更改默认字体大小,而现代浏览器缩放将扩展px个单位。但是,如果你的老板来找你并说“不要放大图像或图标,但要使所有字体更大”,该怎么办?更改根字体大小并让所有其他字体相对于此缩放更容易,然后更改数十或数百css规则中的px大小。

我认为对某些图像使用px单位,或者对于某些布局元素仍然有意义,无论设计规模如何,这些布局元素应始终保持相同的大小。

Caniuse.com可能已经说过,当josh3736在2012年发布他的答案时,只有75%的浏览器,但as of March 27 they claim 93.78% support。只有IE8在他们跟踪的浏览器中不支持它。

答案 5 :(得分:1)

我发现编写网站字体大小的最佳方法是为body定义基本字体大小,然后使用em(或rem)代替我声明的其他font-size之后。我认为这是个人偏好,但它对我很有帮助,并且很容易合并更多responsive design

就使用rem单位而言,我认为在代码中使用渐进元素之间找到平衡点是很好的,但同时也提供对旧版浏览器的支持。 Check out this link about browser support for rem units,这应该有助于您的决定。

答案 6 :(得分:0)

ptrem类似,因为它相对固定,但几乎总是与DPI无关,即使不兼容的浏览器以设备相关的方式处理px也是如此。 rem因根元素的字体大小而异,但您可以使用Sass / Compass之类的内容自动执行pt

如果你有这个:

html {
    font-size: 12pt;
}

然后1rem始终为12ptremem仅与设备无关,与其所依赖的元素无关;某些浏览器不按规范行事,并按字面意思对待px。即使在网络的旧时代,1点一直被认为是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的语言,比如Sass / SCSS。
  • 使用em表示相对尺寸。能够说“我希望左边的边距大约是字母的最大宽度”,或者, “让这个元素的文字比周围的文字要大一些。” <h1>是在ems中使用字体大小的好元素,因为它可能出现在各个地方,但应始终大于附近的文本。这样,对于应用于h1的每个类,您不必具有单独的字体大小:字体大小将自动适应。
  • 使用px表示非常小的尺寸。在非常小的尺寸下,pt在96 DPI的某些浏览器中可能会变得模糊,因为pt和{{ 1}}不要排队。如果您只想创建一个薄的单像素边框,请说明。如果你有一个高DPI显示器,这在测试过程中对你来说并不明显,所以一定要在某个点上测试通用的96-DPI显示器。
  • 不要处理子像素,以便在高DPI显示器上使用。有些浏览器可能会支持它 - 特别是在高DPI显示器上 - 但这是禁忌。大多数用户更喜欢大而清晰,尽管网络已经教会了我们开发人员。如果您想使用最先进的屏幕为用户添加扩展细节,您可以使用矢量图形(读取:SVG),无论如何您应该这样做。

答案 7 :(得分:0)

是的,REM和PX是相对的,但其他答案建议使用REM而不是PX,我也想通过一个可访问性示例对此进行支持。
当用户在浏览器上设置不同的字体大小时,REM会自动缩放网页上的字体,图像等元素,而PX则不然。


在下面的gif中,左侧文本使用字体大小REM单位设置,而右侧字体则通过PX单位设置。

enter image description here

  

如您所见,当我调整大小时,REM正在自动放大/缩小   网页的默认字体大小。(右下角)

网页的默认字体大小为16px,等于1雷姆(仅用于默认html页面,即html{font-size:100%}),因此1.25rem等于20px。

P.S:还有谁在使用REM? CSS框架!例如Bootstrap 4,Bulma CSS等,因此更好地相处。

答案 8 :(得分:-1)

一半(但只有一半)刻板的答案(另一半是对官僚主义现实的不屑一顾):

使用vh

所有内容的大小始终与浏览器窗口大小相同。

始终允许向下滚动,从不向侧面滚动。

将主体宽度设置为静态50vh,并且没有浮点或跳出父div。而且仅使用表格进行样式设置,因此所有内容都可以按预期严格地固定到位。包括一个javascript函数,以撤消用户可能执行的任何ctrl +/-活动。

每个人都会讨厌您,除非那些告诉您使事物与他们的模型匹配的人,他们会欣喜若狂。而且每个人都知道他们的意见是唯一重要的意见。

答案 9 :(得分:-3)

是。或者说,不,不。

呃,我的意思是,没关系。使用对您的特定项目有意义的那个。 PX和EM或两者同样有效,但根据您的整个页面的CSS架构,它们的行为会有所不同。

更新:

为了澄清,我说通常情况下你使用哪个并不重要。有时,您可能特别想要选择一个而不是另一个。如果你可以从头开始并希望使用基本字体大小并使相关的所有内容成为可能,那么EM很不错。

当您将重新设计改造到现有代码库并且需要px的特殊性以防止错误的嵌套问题时,通常需要PX。

答案 10 :(得分:-4)

em是前进的方式,不仅仅是字体,但你也可以使用盒子,线条粗细和其他东西,为什么?

简单地说em是唯一可以与浏览器中的alt +和alt-键一起缩放以进行缩放的。

其他测量值可以缩放,但不像em那样干净。

另外,如果你想要最好的缩放,也可以在可能的情况下将你的图形转换为基于矢量的SVG,因为它们也可以根据浏览器缩放比例进行干净的缩放。

答案 11 :(得分:-5)

对于处理+/-缩放的媒体查询而言,EM是唯一可扩展的东西,人们一直这样做,而不仅仅是盲人。这是另一个very well written专业演示,说明为什么这很重要。

顺便说一句,这就是为什么Zurb Foundation uses ems,而劣质的Bootstrap 3仍然使用像素。