CSS媒体查询如何添加条件样式
时间：2025-11-22 23:10:34 193浏览 收藏
想要让网页在不同设备上呈现最佳效果？本文详解CSS媒体查询如何引入条件样式，实现响应式设计！通过`@media`规则，你可以针对不同屏幕尺寸、设备类型应用不同的CSS样式。文章深入讲解了`min-width`、`max-width`等常用媒体特性的用法，并推荐移动优先原则，即先编写小屏幕样式，再逐步增强大屏幕显示效果。同时，介绍了内联、内部、外部等多种引入媒体查询的方式，以及如何使用``标签引入特定媒体的CSS文件。掌握这些技巧，轻松打造适配各种设备的完美网页！
使用@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)
例如：在移动端隐藏某个元素，在桌面端显示
@media (max-width: 767px) {.sidebar { display: none; }
}
@media (min-width: 768px) {
.sidebar { display: block; }
}
引入方式：内联、内部、外部均可
媒体查询可以写在任意 CSS 引入方式中：
- 内部样式表：放在