《响应式Web设计：HTML5和CSS3实践指南》——1.5节基于媒介查询的图像缩放

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第1章，第1.5节基于媒介查询的图像缩放，作者（美） Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

1.5 基于媒介查询的图像缩放
媒介查询是针对响应式图像的另一个有用和高度可定制的方法。这与通过设置宽度百分比来实现自适应宽度的方法并不相同。你的设计可能需要为不同的屏幕尺寸范围准备一些具体的图像宽度，而自适应宽度会打破你的设计。

1.5.1 准备工作
这种方式仅仅需要一张图像。而且在客户端浏览器调整图像，而不是在服务器端。

1.5.2 实现方式
HTML代码相当简单，使用标准的图像标签创建一个图像元素，如下所示：

将CSS中的这个类添加到每个媒介查询中，所对应设置的尺寸都不相同。这将会使浏览器针对每个不同的尺寸窗口渲染所需的图像大小。媒介查询可与其他CSS类共存。接着，添加一个独立于媒介查询的CSS的类属性，设置图像属性为height:auto。这样只需添加一行CSS即可对两个媒介查询都起作用。

通过媒介查询方法便可实现针对多个不同的浏览器窗口尺寸设置对应的图像尺寸。

1.5.3 工作原理
CSS3媒介查询在CSS中通过逻辑条件将浏览器依据窗口属性进行区分，并基于此来完成不同样式的渲染。该方法正是利用这一点来对不同的浏览器窗口尺寸设置一个不同的图像宽度。这提供了响应式的图像尺寸，因此你可以进行高粒度级别的控制。

【Web前端】 HTML5 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为
HTML5相关面试题:1.H5新特性；2. HTML5 新标签的浏览器兼容问题；3.H5 的离线存储；4.H5缓存和常规缓存有什么差别；5:H5缓存优势；6.Web Worker 和Web作用 ●拖放(Drag and drop) API. ●语义化更好的内容标签( header、nav、footer、 aside、 article、 section )。 ●音频、 视频(audio、video) API。 ●画布( Canvas) API。 ●地理( Geolocation) API。 ●本地离线存储( localStorage)，即长期存储数据，浏览器关闭后数据不丢失。 ●会话 存储( sessionStorage)，即数据在浏览器关闭后自动删除。 ●表单控件包括calendar、date、 time、 email、 url、 search ●新的技术包括webworker、we