媒体查询
@media 语法、min/max-width、print/screen、and/or 逻辑
媒体查询
媒体查询（@media） 是响应式设计的核心技术——根据屏幕宽度加载不同样式。
学完本章你将： 掌握 @media 语法、断点设置、and/or 逻辑。
基本语法
css
@media (条件) {
/* 满足条件时生效的 CSS */
}
/* 屏幕宽度 ≤ 768px */
@media (max-width: 768px) {
.container { width: 100%; }
}
/* 屏幕宽度 ≥ 1024px */
@media (min-width: 1024px) {
.container { width: 960px; }
}常用断点
css
/* 移动优先——从小写到大 */
/* 默认：手机 (< 576px) */
@media (min-width: 576px) { /* 大手机 */ }
@media (min-width: 768px) { /* 平板 */ }
@media (min-width: 992px) { /* 小桌面 */ }
@media (min-width: 1200px) { /* 大桌面 */ }组合条件
css
/* AND：两个条件都满足 */
@media (min-width: 768px) and (max-width: 1023px) { }
/* OR：满足任一条件 */
@media (max-width: 600px), (orientation: portrait) { }
/* NOT：排除 */
@media not screen and (max-width: 600px) { }其他媒体类型
css
@media screen { } /* 屏幕（默认） */
@media print { } /* 打印 */
@media speech { } /* 屏幕阅读器 */
@media (hover: hover) { } /* 支持悬停的设备 */
@media (prefers-color-scheme: dark) { } /* 暗色模式 */