响应式设计概述

1 定义

伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询） 进行了整合，命名为响应式网页设计。

那什么才是真正的响应式设计？马科特说，真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。

2 响应式设计的优势

• 开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、 不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上， 相对多个版本，能节约成本。
• 兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题， 但是响应式Web设计可以提前预防这个问题。
• 操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

3 响应式案例

• https://www.apple.com/cn/

• https://www.microsoft.com/zh-cn/

• https://www.starbucks.com.cn/

• https://www.oppo.com/cn/

• http://www.vivo.com.cn/

• http://www.shanghai.gov.cn/

• https://www.president.gov.tw/

• https://www.tsinghua.edu.cn/

• https://www.whitehouse.gov/

4 响应式设计技术要求

• 设置视口宽度与设备宽度保持一致
• 不使用绝对宽度
• 相对字体大小
• 利用媒体查询（@media）根据视口宽度动态设置CSS属性
• 响应式图片

5 兼容性（了解）

目前，大部分浏览器以及 IE9 及以上浏览器都支持响应式布局，对于老版本 IE 浏览器可以用 responed.js

<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->