media属性用于指定样式表生效的设备或屏幕条件，常用于响应式设计。通过link标签的media属性可按设备类型（如screen、print）或媒体特性（如max-width、orientation）加载不同CSS文件。例如：适用于小屏设备，而用于打印样式。也可在CSS中使用@media screen and (max-width: 768px) { ... }定义响应式规则。实际应用包括为手机适配紧凑布局、打印时隐藏导航栏、横屏调整图片等。合理设置断点和样式能提升多设备用户体验。
在CSS引入时，media属性用于指定样式表在何种设备或屏幕条件下生效。它常用于响应式设计，让网页根据不同设备（如手机、平板、打印机）应用不同的样式。
基本语法
在link标签中使用media属性：css" media="条件">
其中“条件”可以是设备类型或媒体特性（如宽度、方向等）。常见media取值
按设备类型区分：
- all：适用于所有设备（默认）
- screen：仅屏幕设备（电脑、手机、平板）
- print：打印预览或打印页面时使用
- speech：屏幕阅读器等语音合成器
按媒体特性设置（常用响应式场景）：
Android 开发者指南 第一部分：入门
下载
Android文档-开发者指南-第一部分：入门-中英文对照版 Android提供了丰富的应用程序框架，它允许您在Java语言环境中构建移动设备的创新应用程序和游戏。在左侧导航中列出的文档提供了有关如何使用Android的各种API来构建应用程序的详细信息。第一部分：Introduction(入门) 0、Introduction to Android(引进到Android) 1、Application Fundamentals(应用程序基础) 2、Device Compatibility(设备兼容性) 3、
立即学习“前端免费学习笔记（深入）”；
- min-width: 设置最小屏幕宽度，例如 max-width: 600px 以下生效
- orientation: 检测横屏或竖屏
示例：
内联样式中的@media规则
除了link引入，也可以在CSS文件或style标签中使用@media块：
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
这种方式更灵活，适合复杂响应式布局。
实际应用场景
- 为手机单独加载一套紧凑布局的样式
- 打印网页时隐藏导航栏和广告
- 横屏时调整图片大小或布局方向
基本上就这些。合理使用media属性能让网站适配更多设备，提升用户体验。关键是根据目标设备设置合适的断点和样式规则。
