响应式图像指的是根据设备分辨率、设备像素比，甚至是屏幕方向、屏幕尺寸、页面布局等来加载正确图像，并且图片体积尽可能的小，视觉效果足够高清。
一个真实的场景：用户上传了一张高清图片，这张图片的展示媒介包括 27 英寸的 iMac、15 寸的 Macbook Pro、各种尺寸的平板、各种分辨率的 Windows 本、各种尺寸和 DPR 的手机，如何保证图片在不同的媒介上都足够高清、图片体积尽可能小呢？
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的 viewport 了，只有明白了 viewport 的概念以及弄清楚了跟 viewport 有关的 meta 标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
通俗的讲，移动设备上的 viewport 就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上 (也可能是一个 app 中的 webview) 用来显示网页的那部分区域，但 viewport 又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的 viewport 都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的 viewport 设为 980px 或 1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的 viewport 的宽度要小的。下图列出了一些设备上浏览器的默认 viewport 的宽度。
优点：无需插件和手机主题，对移动设备友好，能够适应各种窗口大小。只需在 CSS 中添加 @media screen 属性，根据浏览器宽度判断并输出不同的长宽值
1280 分辨率以上（大于 1200px）
@media screen and (min-width:1200px){ | |
#page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} | |
} |
传统的项目开发中，我们只会用到 px、%、em 这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从 css3 开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了 rem、vh、vw、vm 等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。
