如何用响应式设计提升用户体验感？掌握响应式布局必备技巧【响应式图片】是关键

掌握响应式布局必备技巧：响应式图片

在了解响应式图片之前，你或许得先清除什么是响应式布局（图一所示）。

仅需一套代码就可以使同一个网站在手机、平板和电脑三个不同终端（不同的屏幕尺寸或分辨率）呈现出不同的布局，极大的提升了用户的体验感。

而响应式图片是掌握响应式布局的必备技术，关于如何创建响应式图片？下文将分三种情况逐一进行讲解。

图一：

如何创建响应式图片？

不同的尺寸

当我们想要显示相同的图片内容时，仅仅依据设备来决定显示“不同尺寸”的图片，你可以查看源代码1中的第二张图片。

其中，需要用到的标签和属性有<img>、srcset和sizes，具体语法如下：

<img
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="image-800w.jpg"
  alt="" />

传统的<img>只有一个src属性来指定唯一图片资源，而现下我们可以使用srcset和sizes两个属性来提供额外的图片资源，帮助浏览器选择最合适的资源。

srcset和sizes两个属性的语法比较格式化，学起来很好理解和掌握的，接下来让我们详细了解一下。

srcset

srcset定义了浏览器可选择的图片集合以及每个图片的大小，每张图片信息的设置和前一个用逗号隔开，每个设置要写：

1. 一个文件名（image-480w.jpg）
2. 一个空格
3. 图片的固有宽度（480w）。
   注意，这里以 w 为单位，不是px，且图片的固有尺寸指的是它的实际大小。

sizes

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择，
具体设置要写：

1. 一个媒体条件，上面示例以屏幕宽度为媒体条件，意思是“当屏幕宽度小于等于600px时”
2. 一个空格
3. 当媒体条件为真时，要插入的图片宽度

有了以上全部属性后，浏览器会：

1. 查看屏幕尺寸、像素密度、缩放级别、屏幕方向和网络速度
2. 找出sizes列表中第一个为真的媒体条件
3. 查看该媒体查询对应的插槽大小
4. 加载srcset列表中引用的与插槽大小相同的图片，如果没有，则加载第一个大于所选插槽大小的图片。

相同尺寸，不同分辨率

假如有一张图片，在不同屏幕分辨率下，以相同的实际尺寸显示。通过提供高分辨率版本的图片，可以在高分辨显示器上提供更好的用户体验。

本小节中，仅使用srcset结合 x 描述符（一种更简单的语法），而不用sizes，来让浏览器选择合适分辨率的图片。你可以参考源代码2中示例。

示例中，图片10.png默认为1x，宽度最小，1.5x 和 2x 分别是最小宽度的1.5倍和2倍。

<img 
src="/12.png" 
alt="gril" 
srcset="10.png, 11.png 1.5x, 12.png 2x">

示例中，当我们在没有设置srcset时，默认展示 2x 的12.png图片，并且值得注意的是，若在高分辨率显示器下，展示如下图片可以看到更多细节：

但，当我们设置好srcset后，浏览器会选择更适合当下屏幕分辨率的图片（1.5x的11.png图片）展示：

任意尺寸 图片裁剪

如果我们用第一小节的语法来显示类似以下图片时，图片中的人物缩小，会出现在小屏幕里看不清细节的情况（该图片不够具有特殊性）。

请参考源代码1中的第一张图片：

那么，当我们希望在小屏幕设备下展示一个裁剪的、放大人物的竖向图片时，这需要我们借助<picture>元素来解决这一问题。

就像<video>和<audio>一样,<picture>元素是包含多个<source>元素的容器，它提供了多个不同的资源供浏览器选择，然后还有至关重要的<img>元素。源码中的代码如下：

<picture>
        <source media="(max-width:799px)" srcset="image1-480w-tailor.png">
        <source media="(min-width:800px)" srcset="image1-800w.png">
        <img src="./image1-800w.png" alt="people">
</picture>

• <source>元素提供了多个不同的资源供浏览器选择，包含属性有media和srcset：
  1. media属性包含一个媒体条件，这些条件决定哪张图片会显示—第一个条件为真的图片会显示
  2. srcset属性包含要显示图片的路径
• <picture> 元素内除 <source>外，在最后必须提供一个<img>元素，来显示默认图片
• 在上述示例中，如果视口的宽度小于等于779px，第一个<source>元素的图片就会显示；如果视窗的宽度大于等于800px，就显示第二 张图片；当媒体条件都不为真时，会显示<img>元素的默认图片

借助以上代码，就可以得到小屏幕下的竖向图片了，如下所示：