Media Queries(媒体查询)
媒体查询是 CSS3 中的一个强大功能，它使得我们可以根据不同的设备特性来应用不同的 CSS 样式。这对于响应式设计来说非常重要，因为它允许我们根据用户的设备环境（例如视口宽度、设备方向等）来调整页面布局。
基本语法
媒体查询的基本语法如下：
@media not|only mediatype and (expressions) {
CSS-Code;
}在这个语法中：
-
not：是可选的，表示如果查询的条件不成立，则应用样式。
-
only：也是可选的，用于防止不支持媒体查询的
mediatype的旧浏览器应用指定的样式。它对现代浏览器没有影响。 -
mediatype：表示应用样式的设备类型。例如：screen、print等。
-
and：用于连接多个查询，表示且关系。
-
or：用于连接多个查询，表示或关系。
-
expressions：用于检查特定的媒体特性。例如：(min-width: 500px) 或 (width >= 500px) 。注意括号！
使用方式
媒体类型可以在 HTML 和 CSS 中使用：
在 HTML 中使用
在 HTML 中，我们通常在 <link> 标签中使用媒体查询，以确定何时应用特定的 CSS 文件。例如：
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">在 CSS 中使用
在 CSS 中，我们使用 @media 规则来包含媒体查询。例如：
@media screen and (width >= 900px) {
body {
background-color: lightblue;
}
}
@media screen and (width <= 600px) {
body {
background-color: lightcoral;
}
}使用场景
判断设备类型
媒体查询可以用于判断设备类型，例如是否为屏幕（screen）或打印机（print）。常见的设备类型，即mediatype有：
-
all：适用于所有设备。
-
print：适用于打印机和打印预览模式。
-
screen：适用于电脑屏幕、平板、智能手机等。
-
speech：适用于屏幕阅读器等对话媒体。
具体实现
https://codepen.io/qchtspzb-the-solid/pen/Jjwybae
判断设备特征
媒体查询可用于检查用于查看网页的设备的任何特定特征，常见的设备特征有：
-
aspect-ratio 用于根据视口的宽高比应用不同的样式。
@media (aspect-ratio: 16/9) { /* 视口宽高比为16:9时的样式 */ }
-
min-resolution 和 max-resolution 用于根据设备的分辨率应用不同的样式。
@media screen and (min-resolution: 300dpi) { /* 当设备的分辨率大于或等于300dpi时应用的样式 */ } @media screen and (max-resolution: 150dpi) { /* 当设备的分辨率小于或等于150dpi时应用的样式 */ }
-
prefers-color-scheme 用于检测用户是否选择了深色模式或浅色模式。
@media (prefers-color-scheme: dark) { /* 用户选择了深色模式时的样式 */ } @media (prefers-color-scheme: light) { /* 用户选择了浅色模式时的样式 */ }
-
prefers-contrast 用于检测用户是否选择了高对比度模式。
@media (prefers-contrast: high) { /* 用户选择了高对比度模式时的样式 */ }
-
orientation 用于检测设备是处于横向模式还是纵向模式。
@media (orientation: landscape) { /* 设备处于横向模式时的样式 */ } @media (orientation: portrait) { /* 设备处于纵向模式时的样式 */ }inverted-colors 用于检测用户是否选择了颜色反转模式。
@media (inverted-colors: inverted) { /* 用户选择了颜色反转模式时的样式 */ }
判断视口尺寸
媒体查询还可以用来根据浏览器视口的大小应用不同的样式。
@media (max-width: 600px) {
/* 浏览器宽度小于或等于600px时的样式 */
}
@media (width <= 600px) {
/* 浏览器宽度小于或等于600px时的样式 */
}
@media (min-width: 900px) {
/* 浏览器宽度大于或等于900px时的样式 */
}
@media (width >= 900px) {
/* 浏览器宽度大于或等于900px时的样式 */
}使用示例
具体实现https://codepen.io/qchtspzb-the-solid/pen/eYbEBQM
总的来说，媒体查询是创建响应式设计的重要工具，让我们能够创建在不同设备和屏幕尺寸上都能良好的显示网页。
Container Queries(容器查询)
Container Queries 是一种新的 CSS 特性，它可以让我们根据父容器的尺寸而不是视口的尺寸来应用样式。这是对传统媒体查询的一种补充，因为媒体查询只能根据视口尺寸或设备特性来应用样式。
基本语法
-
定义容器使用
container-type属性，这个属性可以有以下几个值：-
normal：表示元素不是一个容器，不会被用于容器查询。主要用于撤销之前对元素设定的
container-type。 -
size：表示容器的宽度和高度都可以被查询。
-
inline-size：表示容器的行内尺寸（即宽度）可以被查询。
-
-
命名容器使用
container-name属性，容器名称用于匹配指定名称的规则，并将对应样式应用于这些容器。 -
定义
@container规则，语法如下：@container [containerName] (condition) { /* 样式声明 */ }
注意：
-
如果省略 containerName，
@container规则只会用于 html 标记中的第一个容器。 -
定义为容器的父元素则无法在
@container中应用样式，所以若要设置父元素的容器查询样式，需要加一层元素包裹子元素，再设置包裹元素的样式。 -
container-type和container-name可以简写为container属性， 如：.container { container: containerName / inline-size; }
具体实现https://codepen.io/qchtspzb-the-solid/pen/OJrjWvj
容器查询长度单位
cqw、cqh、cqi、cqb、cqmin、cqmax单位是 CSS 中的容器查询长度单位，用于指定长度相对于查询容器的尺寸。使用容器查询长度单位的 CSS 样式表可以更轻松地将组件从一个查询容器移动到另一个查询容器。
-
cqw容器查询宽度（Container Query Width）占比。1cqw 等于容器宽度的 1%。 -
cqh容器查询高度（Container Query Height）占比。1cqh 等于容器高度的 1%。 -
cqi表示容器查询内联方向尺寸（Container Query Inline-Size）占比。这个是逻辑属性单位，默认情况下等同于 cqw。 -
cqb容器查询块级方向尺寸（Container Query Block-Size）占比。同上，默认情况下等同于 cqh。 -
cqmin容器查询较小尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较小的一个。 -
cqmax表示容器查询较大尺寸的（Container Query Min）占比。取 cqw 和 cqh 中较大的一个。
具体实现https://codepen.io/qchtspzb-the-solid/pen/vYvJgvx
使用示例
根据元素的大小而不是视口来设置样式
CSS容器查询允许我们根据元素的宽度、高度、纵横比、方向、块大小和内联大小来设置样式。这意味着我们可以在特定宽度的元素上设置样式。
.card {
flex-direction: row;
}
@container cardContainer (max-width: 500px) {
.card {
flex-direction: column;
}
}创建独立样式的组件
容器查询可以配个 Vue 的组件来使用，并根据不同的查询条件应用不同的样式。
具体实现https://codepen.io/qchtspzb-the-solid/pen/QWzMpjz
参考资料
-
MDN CSS container queries
-
A Primer On CSS Container Queries
-
A guide to CSS container queries
