使用@media规则可根据设备特性应用不同CSS样式，常见于响应式设计，通过min-width、max-width等媒体特性定义断点，推荐移动优先原则，先写小屏样式再逐步增强大屏显示效果。
通过 CSS 实现媒体查询，可以在不同设备或屏幕尺寸下应用不同的样式。核心方式是使用 @media 规则来包裹特定条件下的 CSS 样式，浏览器会根据当前环境是否满足条件决定是否应用这些样式。
基础语法结构
@media 后面跟一个或多个媒体条件，当条件为真时，花括号内的样式生效。
@media 媒体类型 and (媒体特性) {选择器 {
属性: 值;
}
}
常见媒体类型包括：all（所有设备）、screen（屏幕设备）、print（打印）。现代开发中常省略类型，直接用媒体特性。
常用媒体特性示例
最常用的媒体特性是视口宽度，用于响应式布局。
立即学习“前端免费学习笔记（深入）”；
- 最小宽度：
@media (min-width: 768px)—— 屏幕宽度 ≥ 768px 时生效 - 最大宽度：
@media (max-width: 767px)—— 屏幕宽度 ≤ 767px 时生效 - 范围区间：
@media (min-width: 768px) and (max-width: 1024px) - 设备方向：
@media (orientation: portrait)或(orientation: landscape)
例如：在移动端隐藏某个元素，在桌面端显示
.sidebar { display: none; }
}
@media (min-width: 768px) {
.sidebar { display: block; }
}
引入方式：内联、内部、外部均可
媒体查询可以写在任意 CSS 引入方式中：
- 内部样式表：放在 <style> 标签中
- 外部文件：用 link 标签引入，并指定 media 属性
- JavaScript 动态插入：通过脚本创建 style 节点
使用 link 引入特定媒体的 CSS 文件：
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)"><link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
推荐实践
保持移动优先原则：先写小屏样式，再用 min-width 逐步增强大屏样式。
/* 默认样式（手机） */.container { width: 100%; }
/* 平板及以上 */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* 桌面 */
@media (min-width: 1024px) {
.container { width: 1000px; }
}
基本上就这些，合理使用媒体查询能有效适配多端显示效果。关键是掌握断点设置和样式的覆盖逻辑。不复杂但容易忽略细节。
