如何通过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 引入方式中：

• 内部样式表：放在
• 外部文件：用 link 标签引入，并指定 media 属性
• JavaScript 动态插入：通过脚本创建 style 节点

使用 link 引入特定媒体的 CSS 文件：

推荐实践

保持移动优先原则：先写小屏样式，再用 min-width 逐步增强大屏样式。

/* 默认样式（手机） */
.container { width: 100%; }

/* 平板及以上 */
@media (min-width: 768px) {
  .container { width: 750px; }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container { width: 1000px; }
}

基本上就这些，合理使用媒体查询能有效适配多端显示效果。关键是掌握断点设置和样式的覆盖逻辑。不复杂但容易忽略细节。