CSS中@media介绍和使用示例

CSS中@media的介绍和使用示例

一、@media规则简介

@media是CSS中用于实现响应式设计的核心规则，它允许根据不同的设备类型（如屏幕、打印机）或设备特性（如屏幕宽度、高度、方向等）应用不同的样式。通过@media，开发者可以为多设备环境定制样式，提升用户体验。

二、基本语法

@media [媒体类型] and (媒体特性) {/* 样式规则 */
}

1. 媒体类型：常见的类型包括：

   • screen：适用于屏幕设备（默认类型）。
   • print：适用于打印文档。
   • all：适用于所有设备（默认值）。

2. 媒体特性：描述设备的属性，如：

   • min-width / max-width：屏幕宽度范围。
   • min-height / max-height：屏幕高度范围。
   • orientation：设备方向（portrait竖屏 / landscape横屏）。
   • aspect-ratio：设备宽高比（如16/9）。

三、使用示例

1. 根据屏幕宽度调整样式

   /* 当屏幕宽度 ≤600px 时，段落文字为红色 */
   @media (max-width: 600px) {p {color: red;}
   }/* 当屏幕宽度 ≥900px 时，段落字体大小为20px */
   @media (min-width: 900px) {p {font-size: 20px;}
   }
   

2. 适应设备方向

   /* 横屏时图片宽度铺满 */
   @media (orientation: landscape) {img {width: 100%;}
   }/* 竖屏时图片高度铺满 */
   @media (orientation: portrait) {img {height: 100%;}
   }
   

3. 组合多个条件

   /* 屏幕宽度 ≥768px 且为横屏时，背景色为浅珊瑚色 */
   @media screen and (min-width: 768px) and (orientation: landscape) {body {background-color: lightcoral;}
   }/* 排除小屏幕设备 */
   @media not screen and (max-width: 480px) {body {background-color: lightgray;}
   }
   

4. 打印样式优化

   /* 打印时隐藏导航栏，设置黑色文字 */
   @media print {.navbar, .footer {display: none;}a {color: black;text-decoration: none;}
   }
   

5. 预处理器变量（如LESS/SCSS）

   // 定义变量
   $screen-sm: 768px;// 使用变量
   @media (max-width: $screen-sm) {.container {padding: 20px;}
   }
   

四、高级应用

1. 响应式布局分段：

   • 小屏幕（max-width: 480px）：简化布局，隐藏侧边栏。
   • 中等屏幕（481px–768px）：调整字体和容器宽度。
   • 大屏幕（≥769px）：固定宽度或多列布局。

2. 移动优先设计：从最小屏幕开始定义样式，逐步通过@media扩展至大屏幕，降低维护复杂度。

五、注意事项

1. 单位与值：媒体特性需明确单位（如px、em），避免歧义。

2. 性能优化：避免过多嵌套和复杂条件，确保样式高效加载。

3. 测试兼容性：使用浏览器开发者工具模拟不同设备，验证响应式效果。

六、总结

@media是实现响应式设计的基石，通过灵活组合媒体类型和特性，可为不同设备提供适配的样式。常见场景包括屏幕宽度适配、打印优化、设备方向调整等。结合预处理器变量和移动优先原则，能进一步提升开发效率与代码可维护性。