CSS @media

@media是CSS中用于指定不同媒体类型样式的语法规则。通过使用@media规则，可以对不同的设备或不同的显示器宽度应用不同的样式。

语法

@media mediatype and|not|only (media feature) {
  /* CSS rules */
}

• mediatype：指定要应用样式的媒体类型，如screen、print或all。
• and|not|only：连接多个媒体类型或媒体特征。
• media feature：指定要应用样式的媒体特征，如宽度、高度、分辨率等。
• CSS rules：要应用于媒体类型和特征的CSS规则。

示例

/* 当宽度小于等于768px时，应用样式 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 当设备为打印机时，应用样式 */
@media print {
  body {
    font-size: 12pt;
  }
}

/* 仅在设备为屏幕，且为Retina屏幕时，应用样式 */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background-image: url('retina-background.png');
  }
}

媒体特征

以下是常用的媒体特征：

• width：宽度
• min-width：最小宽度
• max-width：最大宽度
• height：高度
• min-height：最小高度
• max-height：最大高度
• orientation：方向（portrait或landscape）
• aspect-ratio：宽高比
• min-aspect-ratio：最小宽高比
• max-aspect-ratio：最大宽高比
• device-width：设备宽度
• min-device-width：最小设备宽度
• max-device-width：最大设备宽度
• device-height：设备高度
• min-device-height：最小设备高度
• max-device-height：最大设备高度
• orientation：方向（portrait或landscape）
• resolution：分辨率
• min-resolution：最小分辨率
• max-resolution：最大分辨率

总结

通过使用@media规则，可以根据设备或显示器的不同应用不同的CSS样式。开发者可以根据需要选择不同的媒体类型或媒体特征来定制样式。