媒体查询以及常用设置

前言

页面为了适应各种设备（PC端、移动端的不同设备）的不同显示情况，增加了媒体查询的功能，通过特定的要求达到不同的样式显示。

---

媒体查询

@media 媒体类型 and|not|only (媒体特性)｛
  /*css样式*/
｝

或者

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体类型

• all
• screen
• print

媒体特性

媒体查询通常用来区别于屏幕宽度大小——实际上区别不同设备的尺寸。而通常需要用到媒体查询的时候（即适配移动端），会通过一些适配方案（viewport、rem等）来确定尺寸比例。

---

常用媒体查询方案

@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 起） */

@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 起） */

@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 起） */

@media screen and (min-width:480px){ ... }/* 超小设备（手机，小于 768px） */