什么叫做响应式呢？
实际上是指一套代码能够在不同的设备下有着不一样的表现。响应式设计依托于 CSS3 中的媒体查询，通过查询当前设备的一个尺寸信息，然后应用不同的样式。
响应式设计在刚推出时非常的火，因为那个时候也没有什么专门针对移动设备设计的页面，而且一套代码就能解决 PC、平板和手机不同设备的各种布局，如果能把 PC 端的页面稍微改一改就变成手机和平板的页面，自然是很好的。
缺点
-
代码冗余，有一些东西是特定 PC 端有，有一些东西是特定手机端有，但是因为是一套代码，因此无论是 PC 端还是手机平板端，这些代码都会有
-
移动端和 PC 端还是有一定的差异性，比如移动端可以两根手指放大页面，而这个在 PC 端是没有的，随着移动端的代码和 PC 端差异越大，使用一套代码就会越感到力不从心
因此，响应式设计在今天看来是有一点没落了，特别是对于互联网公司，还是宁愿 PC 和移动端不同的代码分开，然后移动端再去解决适配的问题即可。
但是对于一些产品型的公司（例如上面的星巴克），因为网站只是用于展示公司的产品为主，所以仍然还在使用响应式设计。
媒体查询介绍
所谓媒体查询，指的就是根据一个或多个基于设备类型、具体特点和环境来应用样式。
关于媒体查询，可以在其官网 https://drafts.csswg.org/mediaqueries/ 上面查询到最新的内容。
在使用媒体查询时，需要注意以下几点：
- 网页宽度自动调整
- 尽量少使用绝对宽度
- 字体的大小使用相对单位（rem、em）
- 布局尽量使用流式布局
媒体类型
首先我们来看媒体类型，具体有如下的类型：
- all：所有设备
- print：打印机设备
- screen：彩色的电脑屏幕
- speech：听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
注意：tty、tv、projection、handheld、braille、embossed、aural 等几种类型在媒体查询 4 中已经废弃
下面是一个简单的示例：
<div></div>
div{
width: 200px;
height: 200px;
background: green;
}
/* 在所有设备中生效 */
@media all{
div{
width: 300px;
height: 300px;
background: red;
}
}
/* 在打印机设备中生效 */
@media print{
div{
width: 300px;
height: 300px;
background: blue;
}
}
/* 在彩色电脑屏幕中生效 */
@media screen{
div{
width: 400px;
height: 400px;
background: pink;
}
}
媒体特性
所谓媒体特性，就是指在确定了设备的情况下，具体再根据细分条件进行分类。
常见的媒体特性有：
-
width：宽度
-
min-width：最小宽度，宽度只能比这个值大
-
height：高度
-
max-width：最大宽度，宽度只能比这个值小
-
orientation：方向
- landscape：宽度大于高度（横屏）
- portrait：高度大于宽度（竖屏）
-
aspect-ratio：宽高比
-
-webkit-device-pixel-ratio：像素比（webkit 内核私有的属性）
下面是关于媒体特性的一个简单示例：
<div></div>
/* 屏幕的尺寸在400-500之间条件满足 */
div{
width: 100px;
height: 100px;
background: red;
}
/* 屏幕尺寸大于500的时候条件满足 */
@media (min-width:500px){
div{
background: green;
}
}
/* 屏幕尺寸小于400的时候条件满足 */
@media (max-width:400px){
div{
background: blue;
}
}
@media (orientation:landscape){
div{
width: 400px;
height: 100px;
}
}
@media (orientation:portrait){
div{
width: 100px;
height: 400px;
}
}
/* 800*600的时候宽高比为4:3 */
@media (aspect-ratio:4/3){
div{
border: 10px solid #000;
}
}
/* 屏幕的像素比为2的时候条件满足 */
@media (-webkit-device-pixel-ratio:2){
div::after{
content: '媒体查询';
font-size: 50px;
}
}
逻辑运算符
在媒体查询中，还支持逻辑运算符，具体有：
- and：合并多个媒体类型（并且的意思）
- , 号：匹配某个媒体查询（或者的意思）
- not：对媒体查询结果取反
- only：仅在媒体查询匹配成功后应用样式（防范老旧浏览器）
下面是关于逻辑运算符的示例：
<div></div>
div{
width: 200px;
height: 200px;
background: red;
}
/* 所有设备、宽度必需大于700px、横屏，这三个条件同时满足才为true */
@media (min-width:700px) and (orientation:landscape){
div{
background: green;
}
}
/* 屏幕尺寸要小于800px, 横屏，这两个只要有一个满足，整个条件就会满足*/
@media (max-width:800px),(orientation:landscape){
div{
background: pink;
}
}
/* 屏幕的尺寸大于800，这个条件才能成立 */
@media not all and (max-width:800px){
div{
background: blue;
}
}
/* 彩色的屏幕，宽度大于1000px，这两个条件同时满足，整体条件才满足 */
@media only screen and (min-width:1000px){
div{
background: grey;
}
}