老生常谈之响应式开发

2019年9月10日 50次阅读 来源: 彼岸花开

什么是响应式设计？

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

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

《老生常谈之响应式开发》

    原文作者：彼岸花开
    原文地址: https://segmentfault.com/a/1190000019466310
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞