CSS - 媒体查询

媒体查询通用语法：

@media mediatype and|not|only (media type) {
}

例如：

@media screen and (min-width: 400px) {
}

宽高查询

宽度 小于等于 时使用样式

@media (max-width: 12450px) {
}
@media (width <= 12450px) {
} /* 媒体查询4 */

宽度 大于等于 时使用样式

@media (min-width: 12450px) {
}
@media (width >= 12450px) {
} /* 媒体查询4 */

常见宽度分割线：

宽度	屏幕类型
<768px	手机
[768px, 992px)	平板
[992px, 1200px)	桌面显示器
$\geq$ 1200px	大桌面显示器

屏幕方向(orientation)

竖屏(portrait)：

@media (orientation: portrait) {
}

横屏(landscape)：

@media (orientation: landscape) {
}

浅色主题 与 暗色主题 (prefers-color-scheme)

浅色主题

@media (prefers-color-scheme: light) {
}

暗色主题

@media (prefers-color-scheme: dark) {
}

屏幕显示 与 打印

@media all {
} /* 所有设备 */
@media screen {
} /* 屏幕显示样式 */
@media print {
} /* 打印样式 */
@media speech {
} /* 屏幕阅读器 */

逻辑结合（复杂查询）

@media () and () {
}
@media () or () {
}
@media not() {
}
@media (30em <= width <= 50em) {
} /* 媒体查询4 */

not, only, all

• not：排除某些指定设备
• only：排除不支持该种媒体查询的浏览器（不应用该样式）
• all：默认省略

引入外部文件时

<link rel="stylesheet" src="styles.css" media="screen" />
<!-- 屏幕显示样式 -->
<link rel="stylesheet" src="styles.css" media="print" />
<!-- 打印样式 -->
<link rel="stylesheet" src="styles.css" media="speech" />
<!-- 屏幕阅读器 -->