本文已参与「新人创作礼」活动，一起开启掘金创作之路。

媒体查询

不同端的设备下，在css文件中，1px所表示的物理像素的大小是不同的，因此通过一套样式，是无法实现各端的自适应。

一套样式不行，可以给每一种设备各一套不同的样式来实现自适应的效果。

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。

语法：

@media mediatype and|not|only (media feature) {
   /* CSS样式 */
}

@media 开头注意@符号
mediatype 是媒体类型，比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等）、print(表示打印机和打印预览）、all(表示所有设备）
关键字 and not only
- and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
- not：表示排除某个媒体类型，相当于“非”的意思，可以省略
- only：表示指定某个特定的媒体类型，可以省略
media feature 媒体特性必须有小括号包含。每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。以下三个常用的：（1）width：表示输出设备中页面可见区域的宽度（2）min-width：表示输出设备中页面最小可见区域的宽度（3）max-width：表示输出设备中页面最大可见区域的宽度

举例来说：

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;
    }
}

上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

CSS 媒体查询

媒体查询