css@media

CSS @media规则是CSS3的一部分，用于根据设备特性或媒体类型应用不同的样式规则。CSS @media规则允许我们根据屏幕尺寸、设备方向、打印或其他媒体类型应用不同的样式。

在CSS中，使用@media规则集来定义不同的媒体查询，并在其中定义样式规则。媒体查询是一段CSS代码，可根据不同的媒体类型或设备特性应用不同的样式。

不同的媒体查询可以根据屏幕宽度、高度、方向、分辨率等特性定义不同的样式。常见的媒体查询有：

1. 屏幕宽度：使用min-width和max-width属性可以根据屏幕宽度设定不同的样式。例如，@media screen and (min-width: 768px)将样式应用于宽度大于等于768像素的屏幕。

2. 设备方向：使用orientation属性可以根据设备的方向应用不同的样式。例如，@media screen and (orientation: landscape)将样式应用于横向方向的屏幕。

3. 分辨率：使用min-resolution和max-resolution属性可以根据屏幕分辨率定义不同的样式。例如，@media screen and (min-resolution: 300dpi)将样式应用于分辨率大于等于300dpi的屏幕。

4. 打印：使用@media print可以根据打印设备应用不同的样式。例如，@media print将样式应用于打印页面。

5. 其他媒体类型：除了screen和print，还可以使用其他媒体类型，如speech（屏幕阅读器）和projection（投影仪）来应用不同的样式。

使用@media规则时，可以在其中定义任意数量的样式规则。例如：

@media screen and (min-width: 768px) {

body {

background-color: yellow;

}

h1 {

color: blue;

}

}

在上面的例子中，当屏幕宽度大于等于768像素时，应用了黄色背景和蓝色标题的样式。

除了媒体查询，@media规则还可以使用逻辑运算符组合多个媒体查询。例如，可以使用逻辑运算符and、or和not来组合多个媒体查询。

@media screen and (min-width: 768px) and (max-width: 1024px) {

/* 样式规则 */

}

@media screen and (min-width: 768px)

print {

/* 样式规则 */

}

@media not screen {

/* 样式规则 */

}

通过使用CSS @media规则，我们可以根据设备特性或媒体类型为不同的设备提供优化的样式，从而提供更好的用户体验。