为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

陪伴而非守候 2019-08-14 16:33:01
我应该在CSS中使用px或rem值单位吗?我正在设计一个新网站,我希望它与尽可能多的浏览器和浏览器设置兼容。我正在尝试确定我应该使用哪种测量单位来确定字体和元素的大小,但我无法找到确定的答案。我的问题是:我应该使用px还是rem在我的CSS中使用?到目前为止,我知道使用px与在浏览器中调整基本字体大小的用户不兼容。我忽视了ems,因为与rems 相比,它们更难以维持,因为它们是级联的。有人说rems与分辨率无关,因此更为理想。但是其他人说大多数现代浏览器无论如何都会平等地缩放所有元素,因此使用px不是问题。我问这个是因为对于CSS中最理想的距离测量有很多不同的看法,我不确定哪个是最好的。
查看完整描述

3 回答

?
宝慕林4294392

TA贡献2021条经验 获得超8个赞

使用px

事实

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

    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
  • 现在,所有正在使用的浏览器中都支持CSS3 rem,它总是只相对于根html元素。

意见

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

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

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

是的,有人仍然可以改变自己的浏览器默认样式表来调整默认字体大小(旧式字体大小选项的等价物),但是这是绕了一个非常深奥的方式,我敢打赌没有人1做的。(在Chrome中,它隐藏在高级设置,Web内容,字体大小。在IE9中,它更加隐藏。您必须按Alt键,然后转到视图,文本大小。)选择缩放选项更容易浏览器的主菜单(或使用Ctrl+-/鼠标滚轮)。

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

如果我们假设大多数用户使用缩放选项缩放页面,我发现相对单位大多不相关。当在同一单元中指定所有内容(图像都以像素为单位处理)时,开发页面要容易得多,而且您不必担心复合。(“我被告知不会有数学” - 有必要计算1.5em实际上有用的东西。)

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

所以我的答案是使用像素单位。我px用于一切。当然,您的情况可能会有所不同,如果您必须支持IE6(可能是RFC的众神怜悯您),您仍然必须使用ems。


查看完整回答
反对 回复 2019-08-14
  • 3 回答
  • 0 关注
  • 807 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信