我应该在我的CSS中使用px还是rem值单位？

 

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

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

  • 到目前为止，我知道使用px与在浏览器中调整基本字体大小的用户不兼容。
  • 我无视em是因为他们更麻烦来维持的，相比于rem S，因为它们级联。
  • 有人说， rem的分辨率是独立的，因此更令人满意。 但也有人说，大多数现代浏览器无论如何均衡放大所有元素，所以使用px不是问题。

    • 我问这是因为对于什么是CSS中距离最合适的测量方法有很多不同的观点，我不确定哪个是最好的。

    TL; DR：使用px 。

    事实

  • 首先，知道每个规格的CSS px单元不等于一个物理显示像素是非常重要的。 这一直是真实的 - 即使在1996年的CSS 1规范中也是如此。

    CSS定义了参考像素，它可以测量96 dpi显示器上像素的大小。 在具有与96dpi大不相同的显示器上（如Retina显示器），用户代理重新调整px单位，使其大小与参考像素的大小相匹配。 换句话说，这种重新缩放正是为什么1个CSS像素等于2个物理视网膜显示像素。

    也就是说，直到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

  • CSS3 rem ，总是只与根html元素相关，太过依赖于新的东西。 截至2012年7月，所有正在使用的浏览器中约有75％支持rem 。

    • 意见

    我认为每个人都同意，设计你的网页适合每个人，并考虑视障人士是很好的。 一个这样的考虑（但不是唯一的考虑）是允许用户使您的网站的文字更大，以便阅读更容易。

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

    现代浏览器（甚至不那么现代的IE7）都改变了默认缩放方法，只是放大所有内容，包括图像和框的大小。 实质上，它们使参考像素变大或变小。

    是的，有人仍然可以改变他们的浏览器默认样式表来调整默认字体大小（相当于旧式字体大小选项），但这是一个非常深奥的方式去实现它，我敢打赌nobody1不会。 （在Chrome中，它隐藏在高级设置，网页内容，字体大小下，在IE9中，它更加隐藏，必须按Alt键，然后转到查看，文本大小。）只需选择缩放选项浏览器的主菜单（或使用Ctrl ++ / - /鼠标滚轮）。

    1 - 在统计误差内，自然

    如果我们假定大多数用户使用缩放选项来缩放页面，我发现相关单位通常是不相关的。 当在同一个单元中指定了所有内容时（图像全部以像素处理），开发页面会更容易，而且您不必担心复合。 （“我被告知不会有数学问题” - 要处理的是必须计算1.5em的实际结果。）

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

    所以我的答案是使用像素单位。 我使用px的一切。 当然，你的情况可能会有所不同，如果你必须支持IE6（可能RFC的众神怜悯你），你仍然必须使用em 。

    我想赞扬josh3736的回答提供了一些优秀的历史背景。 尽管这个问题已经得到明确阐述，但在问题提出后的近五年中，CSS格局已经发生了变化。 当问这个问题时， px是正确的答案，但是今天不再成立。

    tl; dr：使用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有两个部分比其他单位有优势。

  • 用户偏好受到尊重
  • 您可以将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>

    本文很好地描述了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 */
    链接地址: http://www.djcxy.com/p/87433.html

    上一篇: Should I use px or rem value units in my CSS?

    下一篇: Tools to selectively copy HTML+CSS+JS from existing sites