使用方式

/* 直接在CSS文件中使用 */
@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}
 
/* 通过link标签 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="style.css">
 
/* 使用import语句 */
@import url("style.css") screen and (max-width: 600px);

媒体特性

除了屏幕宽度和高度，媒体查询还支持多种其他特性。例如：

aspect-ratio: 元素的宽高比
resolution: 设备的分辨率
orientation: 设备的方向（横向或纵向）
color: 设备是否支持颜色，以及颜色深度