首页 文章

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

提问于
浏览 次
319

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

My question is: should I use px or rem in my CSS?

  • 到目前为止，我知道使用 px 与在浏览器中调整基本字体大小的用户不兼容 .

  • 我忽略了 em ，因为与 rem 相比，它们更难以维持，因为它们是级联的 .

  • 有人说 rem s与分辨率无关，因此更为理想 . 但是其他人说大多数现代浏览器无论如何都会平均缩放所有元素，所以使用 px 不是问题 .

我问这个是因为关于CSS中最理想的距离测量有很多不同的意见，我不确定哪个是最好的 .

html css css3 distance units-of-measurement

11 回答

  • 117

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

    如果你有这个：

    html {
    font-size: 12pt;
}

    然后 1rem 永远是 12pt . rem 和 em 仅与设备无关，与它们所依赖的元素无关;某些浏览器不按规范行事，并按字面意思对待 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 . 一个好的经验法则：

    • Use pt for absolute sizes. 如果你真的需要它相对于根元素是动态的，那你就要求过多的CSS;你需要一种编译成CSS的语言，比如Sass / SCSS .

    • Use em for relative sizes. 能够说，"I want the margin on the left to be about the maximum width of a letter,"或"Make this element's text just a bit bigger than its surroundings." <h1> 是一个在ems中使用字体大小的好元素非常方便，因为它可能出现在各个地方，但应该总是比附近的文本大 . 这样，您就不会't have to have a separate font size for every class that'应用于 h1 ：字体大小将自动适应 .

    • Use px for very tiny sizes. 在非常小的尺寸下，_645844_在某些浏览器中可能会在96 DPI时变得模糊，因为在测试期间 pt 和 px 对你来说是显而易见的，所以一定要在某个点上测试通用的96-DPI显示器 .

    • Don't deal in subpixels to make things fancy on high-DPI displays. 有些浏览器可能会支持它 - 特别是在高DPI显示器上 - 但它是禁止的 . 大多数用户更喜欢大而清晰，尽管网络已经教会了我们开发人员 . 如果您想使用最先进的屏幕为用户添加扩展细节，您可以使用矢量图形（读取：SVG），无论如何您应该这样做 .

    回复于
  • 1

    一半（但只有一半）讽刺回答（另一半是对官僚主义现实的蔑视）：

    使用vh

    浏览器窗口的大小始终都是一样的 .

    始终允许向下滚动，不要向下滚动 .

    将body width设置为静态50vh，并且不会浮动或突破父div . 并且样式仅使用表格，因此所有内容都按预期严格保持原位 . 包含一个javascript函数来撤消用户可能执行的任何ctrl / - 活动 .

    每个人都会恨你，除了那些告诉你让事情与他们的模型匹配的人，他们会欣喜若狂 . 每个人都知道他们的意见是唯一重要的意见 .

    回复于
  • -3

    作为一个反射答案，我建议使用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;
}
    回复于
  • -5

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

    简单来说，em是唯一可以与浏览器中的alt和alt键一起缩放以进行缩放的 .

    其他测量结果可以扩展，但不像em那样干净 .

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

    回复于
  • 376

    我发现编程网站字体大小的最佳方法是为 body 定义一个基本字体大小，然后使用em 's (or rem' s）为之后我声明的所有其他 font-size . 那个's personal preference I suppose, but it'对我很有帮助，也很容易融入更多responsive design .

    至于使用rem单位，我认为在代码中逐步进行之间找到 balancer 是好的，但也要为旧浏览器提供支持 . Check out this link about browser support for rem units，这应该有助于您的决定 .

    回复于
  • 7

    This article很好地描述了 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 */
    回复于
  • -4

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

    我建议使用 rem 单位作为字体，只是因为它使您（开发人员）更容易更改大小 . 用户很少在浏览器中更改默认字体大小，并且现代浏览器缩放将扩大 px 单位 . 但如果你的老板来找你并说"don't enlarge the images or icons, but make all the fonts bigger"怎么办？更改根字体大小更容易，让所有其他字体相对于此缩放，然后在数十或数百个css规则中更改 px 个大小 .

    我认为对于某些图像使用 px 单位或者对于某些布局元素仍然有意义，这些布局元素应始终具有相同的大小，而不管设计的规模如何 .

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

    回复于
  • 1

    EM是唯一可以扩展处理/扩展的媒体查询的东西，人们一直在做，而不仅仅是盲人 . 这是另一个very well written专业演示，为什么这很重要 .

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

    回复于
  • 40

    TL;DR: 使用 px .

    事实

    • 首先，知道per spec，CSS px 单位 does not 等于一个物理显示像素非常重要 . 这一直是真的 - 即使在1996年CSS 1 spec .

    CSS定义参考像素，用于测量96 dpi显示器上像素的大小 . 在dpi基本上不同于96dpi的显示器上（如Retina显示器），用户代理重新调整 px 单元，使其大小与参考像素的大小相匹配 . 换句话说，这种重新缩放正是1个CSS像素等于2个物理Retina显示像素的原因 .

    也就是说，直到2010年（尽管有移动变焦的情况）， px 几乎总是等于一个物理像素，因为所有广泛使用的显示器都是96dpi左右 .

    • em 中指定的大小与父元素相关 . 这导致 em 的"compounding problem"，其中嵌套元素逐渐变大或变小 . 例如：
    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% of all browsers in use左右支持 rem .

    意见

    我想每个人都同意，设计您的页面以适应每个人，并考虑视障人士是好的 . 其中一个考虑因素（但不是唯一的考虑因素！）允许用户使您网站的文字更大，以便更容易阅读 .

    在开始时，为用户提供缩放文本大小的方法的唯一方法是使用相对大小单位（例如 em s） . 这是因为浏览器的字体大小菜单只是改变了根字体大小 . 因此，如果您在 px 中指定了字体大小，则它们不会是't scale when changing the browser'字体大小选项 .

    现代浏览器（甚至是不那么现代的IE7）都将默认缩放方法改为简单地放大所有内容，包括图像和盒子大小 . 实质上，它们使参考像素变大或变小 .

    是的，有人仍然可以更改他们的浏览器默认样式表来调整默认字体大小（相当于旧式字体大小选项），但是's a very esoteric way of going about it and I' d wager nobody1会这样做 . （在Chrome中，'s buried under the advanced settings, Web content, Font Sizes. In IE9, it'甚至更隐蔽 . 你必须按Alt键，然后转到View，Text Size . ）它是_405672的主菜单（或使用Ctrl / - /鼠标滚轮） .

    1 - 在统计误差范围内，自然而然

    如果我们假设大多数用户使用缩放选项缩放页面，我主要找到相对单位无关 . 它不得不担心复合 . （"I was told there would be no math" - 有必要计算1.5em的实际效果 . ）

    仅使用相对单位表示字体大小的另一个潜在问题是，用户调整大小的字体可能会破坏您的布局所做的假设 . 例如，这可能会导致文本被裁剪或运行时间过长 . 如果使用绝对单位，则不必担心意外的字体大小会破坏您的布局 .

    所以我的答案是使用像素单位 . 我用 px 来做所有事情 . 当然，您的情况可能会有所不同，如果您必须支持IE6（可能是RFC的众神怜悯你），那么无论如何你都必须使用 em .

    回复于
  • 2

    是 . 或者说，不，不 .

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

    更新：

    为了澄清，我说通常你使用哪个并不重要 . 有时，您可能特别想要选择一个而不是另一个 . 如果你可以从头开始并想要使用基本字体大小并使所有相关的东西，EM很好 .

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

    回复于
  • -1

    我想赞扬josh3736提供一些优秀历史背景的答案 . 虽然这个问题得到了很好的阐述，但自从提出这个问题以来，近五年来CSS的格局发生了变化 . 当问到这个问题时，px是正确答案，但今天不再适用 .

    tl;dr: 使用 rem

    单位概述

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

    rem 单位表示 r oot em 大小 . 这是 :root 的任何匹配的 font-size . 在HTML的情况下，它是 <html> 元素;对于SVG，它是 <svg> 元素 . 每个浏览器*中的默认 font-size 是 16px .

    在撰写本文时，rem is supported by approximately 98% of users . 如果你're worried about that other 2%, I' ll会提醒你media queries are also supported by approximately 98% of users .

    开使用px

    互联网上的大多数CSS示例使用 px 值，因为它们是事实上的标准 . pt ， in 以及其他各种单位本来可以在理论上使用，但是他们很快就不需要求助于分数，这些分数更长，更难以推理 .

    如果你想要一个细边框， px 你可以使用 1px ， pt 你需要使用 0.75pt 来获得一致的结果，这不是很方便 .

    开使用rem

    rem 的 16px 的默认值对于它的使用来说不是一个非常强大的论据 . 写 0.0625rem 比写 0.75pt 更糟糕，为什么有人会使用 rem ？

    _405705比其他单位有两个优势 .

    • 尊重用户首选项

    • 您可以将 rem 的明显 px 值更改为您想要的任何值

    尊重用户首选项

    多年来，浏览器缩放发生了很大变化 . 从历史上看，许多浏览器只能扩展 font-size ，但当网站意识到他们美丽的像素完美设计在任何时候有人放大或缩小时都会发生变化，这种变化非常迅速 . 此时，浏览器会缩放整个页面，因此基于字体的缩放不在图中 .

    尊重用户的愿望并非如此 . 仅仅因为默认情况下浏览器设置为 16px ，不会将其首选项更改为 24px 或 32px 来纠正错误视力 . 如果您的单位基于 rem ，任何字体较大的用户都会看到比例较大的网站 . 边界将更大，填充将更大，利润将更大，一切都将流畅地扩大 .

    如果您将媒体查询基于 rem ，您还可以确保用户看到的网站适合他们的屏幕 . 在 640px 宽浏览器上将 font-size 设置为 32px 的用户将有效地在 320px 浏览器上以 16px 向用户显示您的网站 . 使用 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>

    Whatever you do, don't set the :root element's font-size to a px value.

    如果将 html 上的 font-size 设置为 px 值，则无法获得've blown away the user'的首选项 .

    如果要更改 rem 的表观值，请使用 % 单位 .

    对此的数学计算是相当直截了当的 .

    :root 的表观字体大小为 16px ，但我们可以说我们要将其更改为 20px . 我们需要做的就是将 16 乘以某个值得到 20 .

    设置你的等式：

    16 * X = 20

    并解决for 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 设置得太小，但是有一个简单的解决方法：使用 rem 在 body 上设置 font-size ：

    :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 是神奇的并且解决了所有事情，但仍然存在一些值得注意的问题 . 什么都没有破坏 in my opinion ，但我说'm going to call them out so you can't说我没有警告你 .

    媒体查询

    使用 rem 遇到的第一个问题涉及媒体查询 . 请考虑以下代码：

    :root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

    这里 rem 的值会根据媒体查询是否适用而改变，媒体查询取决于 rem 的值，那么究竟是怎么回事？

    媒体查询中的 rem 使用 font-size 的初始值，并未考虑 :root 元素的 font-size 可能发生的任何更改 . 换句话说，它的表观值总是 16px .

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

    |   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

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

    上下文切换

    如果在项目之间切换各种不同的项目， rem 的表观字体大小很可能会有不同的值 . 在一个项目中，您可能正在使用 10px 的表观大小，而在另一个项目中，表观大小可能是 1px . 这可能会造成混淆并导致问题 .

    我在这里唯一的建议是坚持使用 62.5% 将 rem 转换为 10px 的表观大小，因为这在我的经验中更为常见 .

    共享CSS库

    如果你要在一个网站上使用't control, such as for an embedded widget, there'，那么真的没有办法知道 rem 的表面尺寸 . 如果是这种情况，请随时继续使用 px .

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

    *我不想让任何人远离使用rem，但我无法正式确认每个浏览器默认使用16px . 你看，有很多浏览器，对于一个浏览器而言，如果稍微偏离，比如15px或18px就不会那么难 . 然而，在测试中，我还没有看到一个示例，其中使用默认设置的系统中使用默认设置的浏览器具有16px以外的任何值 . 如果您找到这样的例子，请与我分享 .

    回复于

相关问题