1.背景介绍

现今每天都有更多的手机、平板和电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验呢？

答案是：采用响应式设计。响应式设计可以随着所显示的屏幕大小而改变。实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。

2.知识剖析

设置meta标签

						<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">						
					

• width = device-width：宽度等于当前设备的宽度
• initial-scale:初始的缩放比例(默认设置为1.0)
• minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
• maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
• user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)
• 
  

3.常见问题

screen是什么，有哪些媒体类型?

4.解决方案

screen是媒体类型(media type)的一种，用于电脑屏幕、智能手机、平板等，媒体类型也就是网页显示的媒介，比如，一般在screen上显示时，页面字体要大一些，在纸质媒体显示时，页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢？这就要靠声明media type来实现了。

大部分媒体类型都已弃用了，下面这些是仍可以使用的

• all:用于所有设备
• print:用于打印机和打印预览
• screen：用于电脑屏幕、智能手机、平板等
• speech：应用于屏幕阅读器等发声设备
• 
  

编码实战

下面是一个简单的响应式网页，断点在1200px，768px

demo

6.扩展思考

Bootstrap CSS3媒体查询断点

Bootstrap响应式设计，就是一个典型的媒体查询CSS框架，它设定了某些媒体查询节点，根据不同设备宽度，写不同的断点位置来做响应式查询。

					
		/*==========  Mobile First Method  ==========*/

		/* Custom, iPhone Retina */
		@media only screen and (min-width : 320px) {
		}

		/* Extra Small Devices, Phones */
		@media only screen and (min-width : 480px) {
		}

		/* Small Devices, Tablets */
		@media only screen and (min-width : 768px) {
		}

		/* Medium Devices, Desktops */
		@media only screen and (min-width : 992px) {
		}

		/* Large Devices, Wide Screens */
		@media only screen and (min-width : 1200px) {
		}					
				

					
		/*==========  Non-Mobile First Method  ==========*/

		/* Large Devices, Wide Screens */
		@media only screen and (max-width : 1200px) {
		}

		/* Medium Devices, Desktops */
		@media only screen and (max-width : 992px) {
		}

		/* Small Devices, Tablets */
		@media only screen and (max-width : 768px) {
		}

		/* Extra Small Devices, Phones */
		@media only screen and (max-width : 480px) {
		}

		/* Custom, iPhone Retina */
		@media only screen and (max-width : 320px) {
		}					
				

7.参考文献

参考一：Bootstrap CSS3媒体查询断点

参考二：css媒体查询---MDN

参考三：媒体查询---菜鸟教程

8.更多讨论

栅格系统在不同屏幕设备上的自适应布局是怎么实现的呢？

实例：移动设备和桌面屏幕

实例：手机、平板、桌面

实例：多余的列（column）将另起一行排列