@media 查询在 CSS3 中加入,可以给不同显示尺寸做不同的样式调整。(也就是我们说的自适应)会根据浏览器的宽度和高度重新渲染页面。

media 语法:

@media 媒体类型 逻辑类型 (媒体特征) {
    CSS代码;
}

如当网页显示尺寸宽度小于300px 时,改变body背景颜色。

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

当网页显示尺寸宽度大于 300px时,改变 div 宽度等。

@media screen and (min-width: 300px) {
    div {
        width:200px;
    }
}

逻辑类型:

  • and (与)
  • only(或)
  • not (非)

媒体类型:

  • all (用于所有设备)
  • tv (用于电视和网络电视)
  • print (用于打印机和打印预览)
  • screen (用于电脑、平板、手机等)
  • speech (用于屏幕阅读器等设备)

媒体特征:

  • width (设备中页面可见区域宽度)
  • height (设备中页面可见区域高度)
  • max-width (页面可见区域最大宽度)
  • min-width (页面可见区域最小宽度)
  • max-height(页面可见区域最大高度)
  • min-height(页面可见区域最小高度)
  • max-resolution(页面可见区域最大分辨率)
  • min-resolution(页面可见区域最小分辨率)