响应式 - 基于媒介查询的图像缩放

前言

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

 

准备工作

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

 

实现方式

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

先从一个简单的版本开始，创建一个媒介查询。该媒介查询将检测浏览器窗口的大小，如果浏览器屏幕大于1024px，将提供一张较大的图像，为较小的浏览器窗口提供较小的图像。媒介查询首先查找媒介类型screen，然后查找屏幕尺寸。当浏览器满足媒介查询条件时，将渲染小括号中的CSS。

现在给这张图像标签添加一个类属性。该类在不同的媒介查询中的响应是不一样的，如以下代码所示：

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

为了使图像能自适应于多个设备屏幕尺寸范围，可以结合max-width和min-width媒介查询。为大小介于1024～1280px之间的浏览器窗口指定图像尺寸，需要为screen添加一个min-width为1024px、max-width为1280px的媒介查询。

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

 

工作原理

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