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" /> <!-- 屏幕阅读器 -->