?
HTML和CSS高级指南之四——响应式设计原文
?
互联网发展的速度超乎所有人的想象，甚至可以说是疯狂。在过去几年里，移动互联网的发展已经开始崭露头角。而他的发展速度也远远超过了传统互联网。
?
如今很难找到一个人既没有移动设备，也没有多个可以上网的设备。在英国 移动电话的数量已远远超过人口数，保持这样的 增长势头，今年移动互联网的使用应该就有望超过桌面互联网。
?
随着移动互联网的兴起，也带来了一个问题，就是如何搭建一个网站，可以适合所有用户访问。行业对于这个问题的回答是响应式设计，也就是熟知的RWD。
?
第四课所涉及的主要内容
?
HTML
?
- 响应式设计概述
- 视窗
CSS
?
- 流式布局
- 媒体查询
- 移动第一
- 流式媒体
响应式设计概述
?
响应式设计是一个网站搭建的实践尝试，他使得每种设备和屏幕尺寸都能很好的工作，而不论是大屏还是小屏，手机或是pc。响应式设计关注于提供每个人一个直观的感受和满足。使得pc和手机用户都能够从中受益。
?
响应式设计本身的很多术语是由Ethan Marcotte提出的。他们第一次出现在Ethan在线访谈和他的书中，而且响应式这本书也是很值得一读的。
?
Food Sense是个很漂亮的网站，他响应所有不同的设备尺寸。不管设备尺寸大小如何，食物感官网站都可以轻松适应，给用户一个很自然的用户体验。（如上图所示）
?
响应式、自适应、移动的区别
?
响应式中的一些术语可能并不是新的，而其他术语又跟自适应或是移动有点像。那么你也许会困惑，他们之间的区别到底是什么?
?
响应式和自适应的关系很密切，经常二者是互通的。响应式通常意味着对待任何变化，反应更积极更快。而自适应往往是应对一个新需求或是情况的被动反 应，例如变化。响应式设计应对不同因素的变化，都会很流畅自如，例如设备宽度。而自适应设计会基于一定的因素搭建。将二者结合是一种理想化，提供一个完美 功能模式的网站，这个术语不会产生很大的歧义。
?
另一方面，移动设备，通常意味着需要为移动用户，专门搭建一个移动网站。然而这样做可能有些作用，却不是很好的主意。移动网站要求必须非常轻巧，然而他又很依赖一个新的代码库和浏览器的嗅探。所有的这些都是摆在开发者和用户面前的一个障碍。
?
目前在响应式设计中最流行的技术，就是对于不同浏览器和设备的动态布局设计，他会根据不同的浏览器和设备尺寸的变化，动态改变网页的布局和内容。这个解决方案充分发挥了响应式，自适应和移动设备的三方优势。
?
扩展阅读
- Responsive Web Design
- Responsive设计的十个基本技巧
- Responsive设计的关键三步
- 了解Responsive网页设计的三个特性
- Responsive列布局
- 响应式导航菜单在移动端的制作方法与解决方案
- 基于CSS搭建一个响应式网站
- Responsive教程集（W3cplus提供）
- Responsive资源集（W3cplus提供）
- Responsive Web Design
