响应式布局

---

一、什么是响应式页面？

同一套静态页面代码，在不同的设备中展现出不同的效果。

百度是响应式页面吗？

百度不是响应式页面，它其实是两套代码。

它会监听终端设备，若是电脑访问则展示电脑端的页面，若是手机访问则展示移动端的页面。

---

二、媒体查询

通过@media定义样式，浏览器窗口满足指定条件，才会应用此样式。

代码如下：

.box {
	width:100px;
	height:100px;
	background-color: red;
}

/* 
	max-width小于指定宽度，样式生效 
	min-width大于指定宽度，样式生效
*/	
@media screen and (max-width:600px) {
	.box {
	    width:200px;
		height:200px;
		background-color: yellow;
	}
}

正常情况：

width < 600px 的情况：

设置多个条件

/* 当屏幕宽度小于1000px，大于500px，样式生效 */	
@media screen and (max-width:1000px) and (min-width:500px) {
	.box {
		background-color: blue;
	}
}

我们可以通过媒体查询设置多个样式，让页面适配多个终端样式。

---

三、制作响应式页面

原理：利用flex布局和媒体查询

.container {
	width: 500px;
	display: flex;
	margin: 0 auto;
	justify-content: center;
}

.item {
	width: 100px;
	border: 1px solid #333;
	background-color: red;
}

@media screen and (max-width:700px) {
	.container {
		flex-direction: column;
		width: 100%;
	}
	.item {
		width: 100%;
		background-color: yellow;
	}
}

宽屏时：

窄屏或者移动端时：

---

四、响应式页面的优点与缺点

• 优点：一套页面适应多端设备，提升开发效率；
• 缺点：页面效果不及单独为某一终端定制的页面效果；性能问题；维护成本提升；

总结：大部分项目不会整体采用响应式页面的解决方案。