media属性用于指定样式表生效的设备或屏幕条件，常用于响应式设计。通过link标签的media属性可按设备类型（如screen、print）或媒体特性（如max-width、orientation）加载不同CSS文件。例如：适用于小屏设备，而用于打印样式。也可在CSS中使用@media screen and (max-width: 768px) { ... }定义响应式规则。实际应用包括为手机适配紧凑布局、打印时隐藏导航栏、横屏调整图片等。合理设置断点和样式能提升多设备用户体验。
在CSS引入时，media属性用于指定样式表在何种设备或屏幕条件下生效。它常用于响应式设计，让网页根据不同设备（如手机、平板、打印机）应用不同的样式。
基本语法
在link标签中使用media属性： 其中“条件”可以是设备类型或媒体特性（如宽度、方向等）。常见media取值
按设备类型区分：
- all：适用于所有设备（默认）
- screen：仅屏幕设备（电脑、手机、平板）
- print：打印预览或打印页面时使用
- speech：屏幕阅读器等语音合成器
按媒体特性设置（常用响应式场景）：
- min-width: 设置最小屏幕宽度，例如 max-width: 600px 以下生效
- orientation: 检测横屏或竖屏
示例：
内联样式中的@media规则
除了link引入，也可以在CSS文件或style标签中使用@media块：
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
这种方式更灵活，适合复杂响应式布局。
实际应用场景
- 为手机单独加载一套紧凑布局的样式
- 打印网页时隐藏导航栏和广告
- 横屏时调整图片大小或布局方向
基本上就这些。合理使用media属性能让网站适配更多设备，提升用户体验。关键是根据目标设备设置合适的断点和样式规则。
