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