使用@media实现屏幕自适应

@media

当你的浏览器大小变化的过程中，页面也会根据浏览器的宽度和高度渲染页面；而@media 可以针对不同的媒体类型设置不同的样式，以此可以实现不同页面尺寸的适配。

MDN：@media CSS@规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。 使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。

媒体类型

• all：适用于所有设备
• print：适用于打印预览模式下在屏幕上查看的分页材料和文档
• screen：主要用于屏幕
• speech：主要用于语音合成器

常用媒体特性

• width:浏览器可视宽度
• height:浏览器可视高度
• device-width:设备屏幕的宽度
• device-height:设备屏幕的高度
• orientation:检测设备目前处于横向还是纵向状态
• aspect-ratio:检测浏览器可视宽度和高度的比例（例如：aspect-ratio:16/9）
• device-aspect-ratio:检测设备的宽度和高度的比例

媒体查询

媒体查询可用的逻辑操作符： - and - not - only - ','：逗号分割

应用于网站适配

​
// 标准语法
@media screen and (min-width:1200px){
    background-color: green;
}
​
// 当对媒体类型没有特殊要求时，可以省略
@media (min-width: 300px) {
  body{font-size: 18px}
}
​
@media (min-width: 600px) {
  body{font-size: 20px}
}
​
@media (min-width: 960px) {
  body{font-size: 22px;}
}
​
@media (min-width: 1200px) {
  body{font-size: 24px;}
}
​

tip：当使用 min-width 作为规则时，由于css的特性，所以应该将最大值放在最下面；同理，如果使用 max-width，则应该将最小值放在最下面；

也可以使用 and 进行复杂的查询：

​
@media screen and (min-width: 1200px) {
  body {
    background: saddlebrown;
  }
}
/* 当页面宽度大于960px小于1200px */
@media screen and (min-width: 960px) and (max-width: 1200px) {
  body {
    background: yellow;
  }
}
/* 当页面宽度大于600px小于960px */
@media screen and (min-width: 600px) and (max-width: 960px) {
  body {
    background: darkmagenta;
  }
}
/* 当页面宽度大于300px小于600px */
@media screen and (min-width: 300px) and (max-width: 600px) {
  body {
    background: aqua;
  }
}
/* 当页面宽度小于300px*/
@media screen and (max-width: 300px) {
  body {
    background: salmon;
  }
}
​

\