CSS尺寸单元的概述

>本文探讨了CSS尺寸单元的四个主要类别：绝对，相关，相关和容器相关。我们将研究它们的目的，最佳用例以及选择跨各种设备和屏幕尺寸的响应式和适应性的Web布局的选择策略。

密钥概念：

1. CSS尺寸单元概述：我们将介绍不同的CSS大小单元，将它们分类为上述四个类别。 了解CSS中使用的>计算>>>的>>>在CSS中使用的>之间的差异对于有效应用至关重要。

>详细的单元类型：我们将深入到每个单元类别的细节中。绝对单位在整个媒体上保持一致；字体搭配单元尺寸为字体尺寸；与视口相关的单元调整到浏览器窗口；与容器相关的单元取决于其父元素的尺寸。 实际示例和用例将说明其申请。
2. >

   >

   实用的应用和最佳实践：本文以针对不同设计场景选择适当单元的指导结束。 我们建议将绝对单元用于固定尺寸，可扩展版式的字体相关单元，用于响应式设计的视口相关单元以及各种布局内灵活组件的容器相关单元。目的是提高各种设备的网站可读性，可用性和可访问性。

3. 了解CSS尺寸单元

> CSS提供了指定元素大小或长度的各种方法。 这些单元分为四类：

绝对单位：

，

，

等。这些单元是固定的，并且独立于其他元素或视口。

> font叠加单元：，cm，px，in等。这些单元相对于元素的字体大小或其root元素的字体大小。

>视口相关的单位：em，rem，ch，ex等。这些单元相对于浏览器ViewPort的尺寸而言。

>

相关单位：vwvh，vmin，vmax，

等。这些单元相对于元素包含的块的尺寸（容器查询上下文）。

在继续之前，让我们回顾一下关键术语：cqw

• 指定的值：> stylesheet中定义的值。
• 计算值：应用浏览器级联和继承规则后的值。> >
使用的值：
• >浏览器调整和转换后的最终值（相对单位至绝对的物理单位到像素）。
绝对单位

绝对单位与特定的媒体依赖性测量相关。 对于打印，它们对应于物理单位。对于屏幕，它们与像素有关（大约1/96英寸）。 示例包括，，

，

，in和cm。 表1总结了这些单元及其等效物。 虽然对已知的物理尺寸有用，但由于对具有调整后的浏览器字体尺寸的用户缺乏可扩展性，避免将其用于字体尺寸。 mmQ>字体相关单位ptpc

>字体相关单元使用字体指标来确定元素尺寸。 这些可以相对于元素的

（局部）或根元素的（root-relative）。 和

是常见的例子。

是相对于父font-size的，而font-size相对于root元素的em>。 其他单元，例如rem>，em，font-size，及其根旋转的对应物（rem>，font-size，ch）基于glyph dimensions（字符的可视化表示）。 这些字体之间可能会有很大的变化，从而影响最终渲染尺寸。 线高单元（ex和ic）也包含在此类别中。rch> rex ric与视口相关的单位lh rlh

与视口相关的单元取决于浏览器窗口的尺寸。 它们是相对于初始包含块的计算方法（针对分类媒体的视口或页面）。

和分别代表视口宽度和高度的1％。 和

分别是的较小和较大的。 动态视口单元（vw，vh等）随着浏览器接口元素的变化而进行调整。 这些单元对于创建全屏元素和流体版式很有价值。> vmin vmax容器相关单元vwvh相对于元素包含的块，与容器查询相对于元素的包含块计算

>容器相关单元（或容器查询长度单元）。 cqw>和cqh表示容器宽度和高度的1％。 cqi和cqb分别相对于内联和块大小，并且受writing-mode属性的影响。 cqmin和cqmax是和。 这些单元能够创建适应不同上下文的组件。> cqicqb结论

掌握CSS尺寸单元是创建响应式和适应性的Web布局的关键。 单位的选择显着影响网站的可读性，可用性和可访问性。 根据设计需求，目标设备和可访问性要求选择单元。 不同单元的组合通常是最有效的方法。 以下部分包括一个常见问题部分，以进行进一步澄清。

>

（常见问题部分将在此处遵循，反映了原始常见问题解答部分的结构和内容。

以上是CSS尺寸单元的概述的详细内容。更多信息请关注PHP中文网其他相关文章！