“使用相对单位的样式表可以更容易地在不同的输出环境之间进行缩放”。

huangapple go评论110阅读模式
英文:

"Style sheets that use relative units can more easily scale from one output environment to another"?

问题

CSS规范在讨论相对单位与绝对单位时有如下声明:

使用相对单位的样式表可以更容易地在不同输出环境中进行缩放。

这是什么意思,为什么会这样呢?

  1. "更容易进行缩放" 是什么意思?
  2. "输出环境" 是什么?

"输出环境"

这是指屏幕的dpi吗?还是打印媒体与屏幕媒体的区别?或者是指UA自定义样式表或为提高可访问性而进行的文本大小调整?

"更容易进行缩放"

这是否意味着元素的大小在不同dpi的屏幕上查看时会保持相对一致?即1rem元素和1.2rem元素在不同屏幕上相对于彼此的大小将保持一致,而14px16px元素相对于彼此的大小将有所变化?这似乎不太正确。

还是这与基准字体大小有关?即,由于相对单位是相对的,它们可以相对于基准字体大小进行缩放。

这假设UA根据设备屏幕的dpi设置基准字体大小。规范指出,基准字体大小是一个绝对值:

在根元素的font-size属性中指定时,1rem等于font-size属性的初始值。来源

初始的font-size值是medium来源

medium是一个absolute-size,这些映射由UA定义。来源

因此,可以理解为,由于相对长度单位可以基于根字体大小,它们可以受到UA关于基准字体大小应该是什么的决策的影响。

但是不清楚为什么这是一件好事,与仅仅使用CSS像素相比有何优势,因为CSS像素应该始终具有相同的物理大小(约为1/96英寸)。是否有一些浏览器违反了这个规则,将“CSS像素”大小调整得更小,比如在Android上的Chrome的“桌面模式”中?

因此,如果基准字体大小和CSS像素都是基于dpi的,并且它们都旨在显示一致的物理大小,那么除非有一些情况下UA会使根字体大小不是一致的物理大小,否则使用其中一个的优势是什么?

英文:

The CSS Spec has this statement when talking about relative units versus absolute units:

> Style sheets that use relative units can more easily scale from one output environment to another.

What does this mean and why is it true?

  1. What does it mean to "more easily scale"?
  2. What is the "output environment"?

"output environment"

Is this referring to the dpi of the screen? Or print media versus screen media? Or does it speak to UA custom stylesheets or text size adjustments for accessibility?

"more easily scale"

Does it mean that element sizes will stay relatively consistent when viewed on different screens with different dpis? I.e. that a 1rem element and a 1.2rem element will be the same relative size compared to each other across different screens, whereas a 14px and a 16px element will vary in size relative to each other? This doesn't seem true.

Or does this have to do with the base font size? I.e. since relative units are relative, they can scale relative to the base font size.

This assumes that a UA sets the base font size based on the dpi of the device's screen. The spec states that the base font size is an absolute value:

> When specified in the font-size property of the root element, 1rem is equal to the initial value of the font-size property. source

The initial font-size value is medium. source

medium is an absolute-size, and these mappings are defined by the UA. source

So it makes sense to say that since relative length units can be based on the root font size, they can be influenced by the UA's decision about what the base font size should be.

But it's unclear why this is a good thing, compared to simply using the CSS pixel which should always be the same physical size (around 1/96"). Do some browsers break this rule and size a "CSS pixel" as much smaller, such as in the "desktop mode" of Chrome on Android?)

So if the base font size and the CSS pixel are both based on the dpi, and they both aim to display a consistent physical size, what's the advantage of using one or the other, unless there are some cases where a UA varies the root font size to not be a consistent physical size.

答案1

得分: 1

如果您打开Google Chrome的设置页面,您可以找到以下内容:

您可以将font-sizemedium更新为其他值,这仅在使用remem单位时才会产生影响。

如果仅考虑像素值,您将使该设置变得无效,用户无法增加您网站的font-size

英文:

If you open the google chrome setting page you can find the following:

“使用相对单位的样式表可以更容易地在不同的输出环境之间进行缩放”。

You can update the font-size from medium to something else and this will have an effect only when using rem and em units.

If you consider only pixel value you will make that setting useless and people cannot increase the font-size of your website.

huangapple
  • 本文由 发表于 2023年8月5日 02:20:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76838345.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定