老生常谈之响应式开发

什么是响应式设计？

作为一名合格的前端开发攻城狮（工程师），做的最多的恐怕就是多端适配，多端兼容的工作了吧，那么如何解决一套代码多端并行且多端适配呢？这个时候 响应式开发 就应运而生了。什么是响应式设计？什么又是响应式图像呢？
我们来了解什么是响应式设计：网页在不同的设备上，都可以达到让使用者感觉比较舒适的合理的视觉体验，叫做“响应式设计”（responsive web design）。
由响应式设计的网页图像，就叫做响应式图像

响应式的解决方案有很多，JavaScript 和 css 都可以实现，这里我们了解一种最简单的，语义最好的 HTML 的解决方案，而且浏览器都原生支持的。

一、由 img 标签引起的问题

<img src="screen.png">

这一行代码在移动端和 PC 端，插入的都是图片 screen.png 文件
这种方式虽然简单高效，可以多端并行，但是有很多的弊端：
1、体积比较大。假设来说我们这个图片有 300Kb，在 PC 端可以使用较大的尺寸，那么在移动端，我么就需要一个看起来比较符合舒服的尺寸，这样既可以节省带宽，降低服务器的压力，也可以更快的让图片渲染出来，提供良好的用户体验。
2. 像素密度问题。做过移动端的开发的攻城狮都了解过 PC 的渲染和移动端的渲染是不一样的。PC 端一般是单倍的像素密度，而手机上的显示器往往是多倍的像素密度。这样的后果就是我们同样一张图，在 PC 上很清晰，到手机上渲染的时候看起来就很模糊，因为像素扩充了。
3. 视觉体验。因为我们桌面级别的显示器屏幕的面积更大，可以暴露出来很多图像的细节，但是手机屏幕比较小，很多细节是无法看清楚的，需要突出重点

二、图片大小的选择

为了解决体积问题希望不同尺寸的屏幕，显示不同大小的图像，我们需要 srcset 属性搭配 sizes 属性。

<img srcset="foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1980w"sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"src="foo-1280.jpg">

上面代码中，

1. srcset:

srcset 属性列出四张可用的图像，每张图像的 URL 后面是一个空格，再加上宽度描述符。

宽度描述符就是图像原始的宽度，加上字符 w。上例的四种图片的原始宽度分别为 320 像素、640 像素和 1980 像素。

2.sizes:sizes 属性给出了三种屏幕条件，以及对应的图像显示宽度。宽度不超过 440 像素的设备，图像显示宽度为 100%；宽度 441 像素到 900 像素的设备，图像显示宽度为 33%；宽度 900 像素以上的设备，图像显示宽度为 254px。

3. 浏览器根据当前设备的宽度，从 sizes 属性获得图像的显示宽度，然后从 srcset 属性找出最接近该宽度的图像，进行加载。

假定当前设备的屏幕宽度是 960px，浏览器从 sizes 属性查询得到，图片的显示宽度是 33vw（即 33%），等于 320px。srcset 属性里面，正好有宽度等于 320px 的图片，于是加载 foo-320.jpg。

注意，sizes 属性必须与 srcset 属性搭配使用。单独使用 sizes 属性是无效的。

四、<picture> 标签，<source> 标签

如果要同时适配不同像素密度、不同大小的屏幕，应该怎么办呢？

这时，就要用到 <picture> 标签。它是一个容器标签，内部使用 <source> 和 <img>，指定不同情况下加载的图像。

<picture>
  <source media="(max-width: 500px)" srcset="vertical.svg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.svg">
  <img src="cat.jpg" alt="cat">
</picture>

上面代码中，<picture> 标签内部有两个 <source> 标签和一个 <img> 标签。

<source> 标签的 media 属性给出媒体查询表达式，srcset 属性就是 <img> 标签的 srcset 属性，给出加载的图像文件。sizes 属性其实这里也可以用，但由于有了 media 属性，就没有必要了。

浏览器按照 <source> 标签出现的顺序，依次判断当前设备是否满足 media 属性的媒体查询表达式，如果满足就加载 srcset 属性指定的图片文件，并且不再执行后面的 <source> 标签和 <img> 标签。

<img> 标签是默认情况下加载的图像，用来满足上面所有 <source> 都不匹配的情况。

上面例子中，设备宽度如果不超过 500px，就加载竖屏的图像，否则加载横屏的图像。

五、<source> 标签的 type 属性

除了响应式图像，<picture> 标签还可以用来选择不同格式的图像。比如，如果当前浏览器支持 Webp 格式，就加载这种格式的图像，否则加载 PNG 图像。

<picture>
  <source type="image.svg" srcset="logo.svg">
  <source type="image.webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

上面代码中，<source> 标签的 type 属性给出图像的 MIME 类型，srcset 是对应的图像 URL。

浏览器按照 <source> 标签出现的顺序，依次检查是否支持 type 属性指定的图像格式，如果支持就加载图像，并且不再检查后面的 <source> 标签了。上面例子中，图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。

六、参考链接

http://www.ruanyifeng.com/blo…

更多优质文章请关注公众号