CSS 媒体查询
1. 媒体查询
1.1. 媒体查询的基本语法
CSS 媒体查询是响应式设计的重要组成部分，允许开发者根据设备特性调整网站样式。通过媒体查询，可以定义条件，当这些条件满足时，应用相应的 CSS 规则，提升网站的适应性。
基本语法示例：
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
当屏幕宽度小于或等于 600px 时，body 背景色会变为浅蓝色。
1.2. 媒体查询的类型和条件
常见的媒体类型：
all：适用于所有设备。print：为打印设备设计。screen：为屏幕设备设计。speech：为语音设备设计。
常见条件：
width：视口的宽度。height：视口的高度。orientation：设备方向，如portrait（纵向）或landscape（横向）。resolution：屏幕分辨率。
示例：
@media screen and (orientation: portrait) {
/* 纵向设备样式 */
}
1.3. 复杂的媒体查询
可以使用逻辑运算符构建更复杂的查询：
and：组合多个条件，所有条件为真时生效。not：取反条件。only：防止旧浏览器错误解析。
示例：
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* 样式 */
}
1.4. 结合使用媒体查询
媒体查询可在 HTML 文件中使用 <link> 标签来加载不同的样式表：
<link rel="stylesheet" href="print.css" media="print">
也可以通过 JavaScript API 检查查询状态：
var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) {
document.body.classList.add('dark-theme');
}
媒体查询能帮助创建更加灵活的网页，确保不同设备上的最佳用户体验。
2. CSS 媒体查询判断运算符
CSS 媒体查询中的运算符（and、not 和 only）可帮助精确控制样式规则的应用。
2.1. 组合使用
and：组合多个条件，当所有条件为真时生效。@media (min-width: 600px) and (max-width: 900px) { /* 样式 */ }not：用于否定条件。@media not (min-width: 600px) { /* 样式 */ }only：仅适用于特定媒介类型，防止旧浏览器错误应用样式。@media only screen and (min-width: 600px) { /* 样式 */ }
组合示例：
@media only screen and (min-width: 600px) and (max-width: 900px) {
body {
background-color: lightblue;
}
}
@media not (min-width: 600px) {
body {
background-color: lightgreen;
}
}
2.2. 注意事项
only运算符提高兼容性，适用于处理旧版浏览器。not运算符能排除特定条件。and运算符帮助定义更具体的条件组合。
通过这些运算符，媒体查询能够实现更复杂、精确的控制，以适应不同设备和环境的需求。