css响应布局的@media

这是css3中的一个特性，允许我们根据屏幕的宽高来应用不同的样式，下面是一些经典的应用：

基础语法：

mediaType 表示媒体类型，如 screen、print、speech 等。mediaFeature 表示媒体特性，如宽度、高度、颜色等。

@media mediaType and (mediaFeature) {
  /* 样式规则 */
}

针对屏幕的宽度，我们设置不同的字体大小

/* 当屏幕宽度小于等于600像素时应用样式 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}
/* 当屏幕宽度大于600像素时应用样式 */
@media screen and (min-width: 601px) {
  body {
    font-size: 16px;
  }
}

也有一些复杂的媒体查询，比如屏幕宽度介于两者之间

@media screen and (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: #f0f0f0;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px), (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 同时满足两个条件时应用的样式 */
}

方向设置

@media screen and (orientation: landscape) {
  /* 横向布局样式 */
}

媒体查询的嵌套

@media screen and (min-width: 600px) {
  /* 大屏幕样式 */
  body {
    background-color: #f0f0f0;
  }

  @media (orientation: landscape) {
    /* 大屏幕横向布局样式 */
    body {
      font-size: 16px;
    }
  }

  @media (orientation: portrait) {
    /* 大屏幕纵向布局样式 */
    body {
      font-size: 18px;
    }
  }
}