gpt4 book ai didi

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

转载 作者:bug小助手 更新时间:2023-10-28 10:55:13 30 4
gpt4 key购买 nike

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

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

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

我问这个是因为对于 CSS 中最理想的距离度量有很多不同的意见,我不确定哪个是最好的。

最佳答案

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 左右。

  • ems 中指定的大小是相对于父元素。这会导致 em 的“复合问题”,即嵌套元素会逐渐变大或变小。例如:

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

    给我们:

      <body> - 20px
    <div> - 10px
    <div> - 5px
    <div> - 2.5px
    <div> - 1.25px
  • 现在 99.67% of all browsers in use 支持 CSS3 rem,它始终只相对于根 html 元素。 .

意见

我认为每个人都同意,最好将您的网页设计为适合所有人,并考虑到视障人士。一个这样的考虑因素(但不是唯一一个!)是允许用户将您网站的文本放大,以便于阅读。

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

现代浏览器(甚至不那么现代的 IE7)都将默认缩放方法更改为简单地放大所有内容,包括图像和框大小。本质上,它们使引用像素变大或变小。

是的,仍然有人可以更改他们的浏览器默认样式表来调整默认字体大小(相当于旧式字体大小选项),但这是一种非常深奥的方法,我敢打赌没人1 做到了。 (在 Chrome 中,它隐藏在高级设置、Web 内容、字体大小下。在 IE9 中,它更加隐藏。您必须按 Alt,然后转到查看、文本大小。)只需选择缩放选项就容易多了浏览器的主菜单(或使用Ctrl++/-/鼠标滚轮)。

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

如果我们假设大多数用户使用缩放选项缩放页面,我发现相对单位大多无关紧要。如果所有内容都以相同的单位指定(图像均以像素为单位),则开发页面会容易得多,并且您不必担心复合。 (“我被告知不会有数学运算” - 需要计算 1.5em 的实际结果。)

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

所以我的答案是使用像素单位。我对所有内容都使用 px。当然,你的情况可能会有所不同,如果你必须支持 IE6(愿 RFC 之神怜悯你),你无论如何都必须使用 ems。

关于html - 我应该在我的 CSS 中使用 px 还是 rem 值单位?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11799236/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com