响应式设计（媒体查询）

什么叫做响应式呢？

实际上是指一套代码能够在不同的设备下有着不一样的表现。响应式设计依托于 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;
	}
}

外部引入媒体查询样式

最后我们来看一下引入媒体查询的方式。

总结起来有 3 种：

1. 在样式里使用

@media all{
	div{
		width: 100px;
	}
}

2. 在 link 标签里使用

<link rel="stylesheet" href="1.css" media='all'>

<link rel="stylesheet" href="css/200.css" media="all and (min-width:200px)">
<link rel="stylesheet" href="css/400.css" media="(min-width:400px)">
<link rel="stylesheet" href="css/600.css" media="(min-width:600px)">
<link rel="stylesheet" href="css/800.css" media="(min-width:800px)">
<link rel="stylesheet" href="css/1000.css" media="(min-width:1000px)">

3. 在 import 里使用

@import url('1.css') (min-width:200px);

@import url('css/200.css') (min-width:200px);
@import url('css/400.css') (min-width:400px);
@import url('css/600.css') (min-width:600px);
@import url('css/800.css') (min-width:800px);
@import url('css/1000.css') (min-width:1000px);

第二和第三种则是从外部引入媒体查询的样式。

需要注意采用这种外部引入方式时，引入的样式必需放在上面，并且 style 里面的样式不要和下面的样式发生冲突。