上一篇文章提到的“
盒子布局（Boxed）”和“宽屏布局（FullWidth）
”可以适用于绝大多数网站。但，还有另外一种布局方式，叫“自适应布局”，又叫做：响应设计（Responsive Design）和响应式布局（Responsive Layout）。再加上适合移动设备（Mobile Friendly），这些都是一个HTML5网站的最基本属性。
先来段定义：
响应设计（Responsive Design）一种新兴的技术，它采用易变的布局和媒体查询扩展网站，使得网站能够动态适应各种尺寸大小的屏幕。
各种设计事务所比如：家具设计的公司、建筑设计公司、室内设计公司、装饰设计公司等等。这些公司的核心竞争力就是“作品”，即图片。对于他们来说，网站图片越大越好，越清晰越好。
这种网站一般不适合用盒子布局（Boxed）或者宽屏布局（FullWidth），因为以固定图片尺寸的布局方法，很难把图片细节或者整体感传递给用户，特别是在大显示器，高分辨率下。毕竟这两种布局方式，内容区域再大也就1000px宽，在1920px宽度分辨率下，有一半以上空间浪费了。
在各种分辨率下，我们想得到的效果是：
1 保持网站VI的一致性
2 保持网站布局一致性，比如：头部VI条高度保持不变一直在网页最上，底部VI条高度保持不变一直在最下，左侧宽度固定不变。
3 产品图片在高分辨率下显示更大、更清晰。
4 产品图片在小分辨率下主要信息（容颜）不能被裁切。
这就是自适应布局（Responsive Design 响应式设计），这个词在国外受到推崇，在国内还处于扫盲阶段。
下面提供两个不错的网站案例，一个是国外建筑设计公司的网站，一个是意大利家居设计公司的网站，都采用这种自适应布局。为了参考方便，我分别用1280x800和1920x1080两种分辨率截图，其中奥妙自己参悟吧。
文字内容页：
首页：
首页：
图片详情页：
图片列表页：
相关文章参考：自适应网页设计（Responsive Web Design）
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
achair原创文章许可协议：署名-非商业使用-禁止演绎
签名档：八戒，你又在看为师的签名了。
微博：http://weibo.com/achair
博客：http://blog.sina.com.cn/achair
个人网站：http://www.lijian.name
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。