CSS 媒体类型

CSS 媒体类型是用来定义针对不同设备、屏幕尺寸和媒体类型的样式规则。通过使用媒体查询和指定不同媒体类型的样式规则，我们可以实现响应式布局，使网站在不同设备和媒体类型下呈现最佳的视觉效果。

常见的媒体类型

• all: 该媒体类型适用于所有媒体设备。
• print: 该媒体类型适用于打印机和打印预览模式。
• screen: 该媒体类型适用于电脑屏幕、平板电脑和智能手机等媒体设备（默认值）。
• speech: 该媒体类型适用于语音合成器和屏幕阅读器等语音设备。

媒体查询

媒体查询是一种CSS3的技术，它可以根据不同的设备宽度或高度等特性来加载不同的样式表，从而实现响应式布局。

媒体查询的基本语法为：

@media mediatype and (media feature) {
    CSS rules;
}

其中， mediatype 表示媒体类型，media feature 则是指设备的特性（如宽度、高度、设备方向等），CSS rules 则是针对该媒体类型和特性的样式规则。

例如，以下是一个针对视口宽度小于等于 768 像素的媒体查询：

@media screen and (max-width: 768px) {
  /* 这里是对应的样式规则 */
}

这条媒体查询的意思是，当屏幕的宽度小于等于 768 像素时，应用样式规则。

媒体查询可以包含多个媒体特性，也可以与和或非等逻辑运算符组合，例如：

@media screen and (max-width: 768px) and (orientation: portrait) {
  /* 这里是对应的样式规则 */
}

这个媒体查询的意思是，当屏幕的宽度小于等于 768 像素并且设备是竖屏时，应用样式规则。

总结

CSS 媒体类型和媒体查询是响应式布局的重要基础，通过它们可以实现针对不同设备、屏幕尺寸和媒体类型的样式规则，进而使网站在不同设备和媒体类型下呈现最佳的视觉效果。需要注意的是，媒体类型和媒体查询的语法和规则需要认真学习和掌握，以确保正确地应用响应式布局。