现在使用移动设备人越来越多，移动版的Website随之也越来越重要；但是移动端设备的大小不一，屏幕分辨率各不相同，我们不可能为BlackBerry，iPhone， iPad等等每个都做单独的页面设计。所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率，这种设计就叫响应式Web设计
什么是响应式Web设计（Responsive Web design）?
响应式Web设计是一种Web设计和开发能够根据屏幕大小、平台和方向对用户的行为和环境做出响应的设计。它包括了灵活的网格和布局，图像和智能使用CSS的media queries特性。当用户从Laptop切换到iPad上时，该网站应能自动地切换CSS规则以适应Device分辨率，图像尺寸和脚本执行。换句话说，响应式Web设计是具备能够自动响应用户喜好的技术。这将一劳永逸的满足对每个新上市的移动终端都要进行不同设计和开发的需求。
需要注意的是：响应式Web设计不仅仅是
可调屏幕分辨率和可自动调整大小的图像，而且更是一种采用全新思考的Website设计方法。
响应式Web设计的用途
随着越来越多的设备而来的是各式各样的屏幕分辨率、定义和方向。每天都有正在开发的新屏幕尺寸的设备。每个设备都可以拥有不同的尺寸、功能、甚至颜色。有些是横向，有些是纵向，甚至还有些完全是正方形的。如图所示：
下图列出了一些最常见的：
所以，如果你要使你的客户满意，你必须让你的网站能够自动调整并适合上述设备的屏幕。例如，你应该为不同的设备定制不同的布局结构：
定制布局
同样，有些时候，根据需要显示或隐藏一些内容：
显示或隐藏内容
很明显，我们不能为每一种设备定制一个页面。所以，我们应该如何处理这种情况呢?
Media queries & Viewport
解决问题的关键就是Media queries和Viewports。下面的内容是关于如何最好的使用Media queries和Viewports的。但是我并不会深入的讲怎样增强响应的细节，如果感兴趣，可以查看这篇博文的最后一部分：“参考文章”。
● @media queries
作为一个网页设计师或前端开发者，我们希望我们的网页总能很容易的自适应不同的设备和屏幕尺寸，不管我们用户使用的是21″台式显示器，13″笔记本电脑，10″的iPad或者更小的智能手机。响应式网页设计使用@media queries根据浏览器的宽度和CSS来改变页面的布局。我们可以这样使用的CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Default wide-screen styles */
@media alland (max-width:1024px) {
/* styles for narrow desktop browsers and iPad landscape */
}
@media alland (max-width:768px) {
/* styles for narrower desktop browsers and iPad portrait */
}
@media alland (max-width:480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media alland (max-width:320px) {
/* styles for iPhone/Android portrait */
}
@media alland (max-width:240px) {
/* styles for smaller devices */
}
是的，我们可以设置更小的width，或者中间尺寸。我待会再讨论。CSS media queries是非常强大和复杂的，在这里不想过多的讨论，因为上面的代码已经足够应付响应式Web设计了。如果你想要知道更多关于Media Queries的细节，请阅读参考文献里的相关文章。
●viewports
现在，当我们调整我们浏览器的大小时，上面的代码已经可以非常不错的完成工作了。但这并不能满足移动端的浏览器。原因是移动端浏览器（iPhone/Safari, Android/Chrome和Fennec）会默认页面是为宽屏幕设计的，所以将它缩小整个页面来适应小屏幕。这就表明了上面的代码完全不足于适应移动端的浏览器，因为设备无法识别正确的宽度。解决方法：在文档的头部使用苹果提供的viewport meta标签，并结合@media queries：
1
<meta name="viewport"content="…">
以上的代码中，content为空，因为我觉得有必要详细讲一下，而不是直接给出来，这样我们就能更清楚的记住，并且知道content里应该填些什么，并且为什么这样填
●width=device-width
我们看见很多网站都建议把content属性的值设置为width=device-width。这相当于告诉浏览器将页面宽度假设为设备宽度。不幸的是，只有当设备是纵向时假设才是正确的。当我们把设备旋转成横向时，device-width还是和纵向的一样（比如，320px），这意味着，即使我们把页面设计成适应了480px横向设备，它还是会返回320px的效果。
问候不一定要慎重其事，但一定要真诚感人
