编程指南-CSS案例开发-3-CSS布局-4：扩展
3.4 扩展：CSS中的数值与单位
在CSS中，数值和单位是密不可分的，共同定义了样式属性的具体值。CSS提供了多种单位帮助开发者精确地控制网页的布局和样式，大致可以分为以下几类。
（1）绝对单位
绝对单位不依赖于视口或父元素的尺寸，是固定的，具体有以下几种。
cm（厘米），基于物理尺寸的厘米。
mm（毫米），基于物理尺寸的毫米。
in（英寸），基于物理尺寸的英寸。
pt（点），传统印刷中使用的单位，大约等于1/72英寸。
pc（派卡），等于12点（pt），主要用于字体大小。
px（像素），在屏幕媒体上，像素是屏幕上显示的最小单位，在不同的设备上，一个CSS像素可能对应不同数量的物理像素。
（2）相对单位
相对单位根据它们的参照物来计算值，具体有以下几种。
em，相对与当前元素的字体尺寸，如果当前元素的字体大小未设置，则继承其父元素的字体大小。
rem，相对于根元素（“<html>”）的字体尺寸。
%，百分比单位，相对于其包含块（通常是父元素）的相应尺寸。
vm，视口宽度的百分比（Viewport Width），1vm等于视口宽度的1%。
vh，视口高度的百分比（Viewport Height），1vh等于视口高度的1%。
vmin，vm和vh的较小值。
vmax，vm和vh的较大值。
ch，数字0的宽度，基于当前字体的“0”字符的宽度。
ex，当前字体中“x”的高度，常用于垂直尺寸的计算。
（3）灵活单位
灵活单位通常用于响应式设计，以适应不同屏幕尺寸和分辨率，具体如下。
fr，在网格布局，“fr”单位用于分配容器中剩余的空间，例如“1fr”，“2fr”将容器的剩余空间分为三等份，第一个占一份，第二个占两份。
（4）无单位值
有些CSS属性可以接受无单位的数值，具体如下。
line-height，当设置为数值时（如 1.5），表示对当前字体尺寸的倍数。
z-index，虽然“z-index”属性接受证书和负数，但本质上并不依赖于任何单位。
💡 注意：
在使用单位时，要注意单位之间的兼容性和效果差异，例如使用“px”单位可以确保元素具有精确的像素尺寸，但在高分辨率屏幕上可能会导致布局不够平滑。
某些属性只接受特定类型的单位，如字体大小、长度、透明度等。
响应式设计时，灵活使用相对单位和视口单位可以帮助开发者进行响应式网页布局。
3.5 扩展：媒体查询@media
媒体查询允许开发者根据不同的媒体类型和条件来应用不同的样式规则，使得开发者能够为不同的屏幕尺寸、分辨率、设备方向等创建响应式和适应性强的布局。媒体查询可以被嵌套在CSS样式表的任何位置，通常放在样式表的开始或结束部分，便于管理和维护。
（1）媒体查询的定义和使用
使用“@media”查询，可以针对不同的媒体类型定义不同的样式，例如，“@media”可以针对不同的屏幕尺寸设置不同的样式，因此对于需要设置响应式的页面，“@media”是非常有用的。开发者在重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。
（2）媒体查询的语法规则
媒体查询条件由媒体类型、逻辑操作符、媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，媒体特征要使用“()”包裹且可以有多个，例如。
screen and (round-screen: true)，表示当设备屏幕是圆形时条件成立。
(max-height: 800px)，表示当高度小于等于800px时条件成立。
(height <= 800px)，表示当高度小于等于800px时条件成立。
screen and (device-type: tv) or (resolution < 2)，表示当设备类型为tv或设备分辨率小于2时条件成立。
（3）媒体逻辑操作
① 媒体逻辑操作符，“and”、“not”、“only”用于构成复杂媒体查询，可以通过“,”将其组合起来，具体解释如下。
and，将多个媒体特征以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立，还可以将媒体类型和媒体功能结合起来。例如，screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴且最大高度小于等于600像素时成立。
not，取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。例如，not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素或大于600个像素时，条件成立。使用not运算符时必须指定媒体类型。
only，当整个表达式都匹配时，才会应用选择的样式，可以防止在某些较早版本的浏览器上产生歧义。使用only时必须指定媒体类型。
“,”，用于将多个媒体查询合并为一个规则，逗号分隔列表中的每个查询都与其他查询分开处理，即如果列表中任何查询为true，则整个media语句均返回true，类似于逻辑或“or”运算符。
② 媒体特征包括应用显示区域的宽高、设备分辨率以及设备的宽高等属性，常见的媒体特征如下所示。
height，应用页面可绘制区域的高度。
min-height，应用页面可绘制区域的最小高度。
max-height，应用页面可绘制区域的最大高度。
width，应用页面可绘制区域的宽度。
min-width，应用页面可绘制区域的最小宽度。
max-width，应用页面可绘制区域的最大宽度。
resolution，设备的分辨率，支持dpi、dppx和dpcm单位。
orientation，屏幕的方向，可选值为portrait（设备竖屏）和landscape（设备横屏）。
dark-mode，系统为深色模式时为true，否则为false。
（4）媒体类型
媒体类型描述设备的一般类别，除非使用not或only逻辑操作符，媒体类型是可选的，且会隐式地应用all类型，媒体类型的值如下所示。
all，用于所有设备。
print，用于打印机和打印预览。
screen，用于电脑屏幕、平板电脑、智能手机等。
speech，应用于屏幕阅读器等发声设备。
创作说明
名称：编程指南-CSS案例开发从学到用完美实践
版本：2024年
网站：http://www.51xueweb.cn
撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆
指导审核：阮晓龙
