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 中，我们通常在 标签中使用媒体查询，以确定何时应用特定的 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
精彩文章
发表评论