持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

目前解决前端响应式布局的方式主要有两种：一是准备两套代码（一套用于PC端、一套用于移动端）；二是通过媒体查询实现。今天主要讲述的就是通过媒体查询实现响应式。通过媒体查询实现响应式布局的框架有很多，下面主要是讲述实现原理，不对框架做推荐和介绍。

@media查询

@media查询即是常说的媒体查询就是通过使用@media语句，可以针对不同的媒体类型定义不同的CSS。因此实现所谓的响应式布局，就是通过@media语句对不同的屏幕大小定义不同的CSS从而实现目的。除此之外，@media语句不仅仅可以对设备屏幕进行查询，还有其他情况，比如print（打印机和打印预览）、speech（屏幕阅读器等发声设备）等。实际开发中主要使用screen（电脑、平板电脑、智能手机等屏幕）。下面也是只对screen进行举例。

CSS 语法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  //css code
}

注释：

1、not|only|and|or是运算符，只有符合结合运算符的匹配句式，才能应用后面的css code，与js语句中的非、仅、且、或类似意义；

2、mediatype是查询对象，不规定就是默认所有媒体type，常用设置是screen；

3、(mediafeature and|or|not mediafeature)是匹配规则。

举例：

1、当设备屏幕大小大于980px（包含980px）时背景色为黑色；

@media (min-width: 980px) {
    body{
        background: black;
    }
}

2、当设备屏幕大小在640px（包含640px）和979px（包含979px）之间时背景色为粉色；

@media (min-width: 640px) and (max-width: 979px){
    body{
        background: pink;
    }
}

3、当设备屏幕大小小于639px（包含639px）时背景色为白色；

@media (max-width: 639px){
    body{
        background: white;
    }
}

Link写法

上述介绍的是使用在CSS内部样式中，实际上可以通过link标签的media属性直接书写查询条件从而选择应用哪个CSS文件。

<link rel="stylesheet" media="screen and (min-width: 980px)" href="xxx.css">
<link rel="stylesheet" media="screen and (min-width: 640px) and (max-width: 979px)" href="xxx.css">
<link rel="stylesheet" media="screen and (max-width: 639px)" href="xxx.css">

这种写法与上面举例的最后效果一致。