“万能”的 100%

背景图片因为是背景图片，采用 background-size：cover 就能解决了背景图片需要覆盖容器的问题。但是通过 高性能响应式 Web 开发实战读书笔记（四）响应式图片 - 图1 标签记载的图片，不能给它固定宽高，因为在响应式页面中它的父容器、它所在的页面宽度随时可能发生变化。也不能不给宽度做限制，因为没有宽度 高性能响应式 Web 开发实战读书笔记（四）响应式图片 - 图2 会按照原始图片大小显示图片。综上所述，响应式图片的需求如下：

  • 图片能够跟随父容器变化而变化。
  • 宽度不受限于父容器，不可按照图片原始尺寸展示。
  1. img {
  2.     max-width:100%;
  3.     height:auto;
  4. }

设置图片的最大宽度为 100%（max-width:100%）。当图片实际宽度大于父容器时，图片能够被限制在父容器宽度内，同时当图片宽度小于图片宽度小于图片时，能够按照实际尺寸展示，而不被强制拉伸。

这种方案只能解决大部分的场景，部分用例场景无法解决。

响应式图用例

基于屏幕分辨率

高分辨率的图片缩小到移动设备上很难看清细节，低分辨率图片在屏幕桌面显示器上放大会模糊不清，要为不同屏幕准备不同尺寸的图片。

基于视口

比基于屏幕分辨率更加准确。基于视口使得我们不用关心屏幕的分辨率如何。

基于设备像素比

根据每个 CSS 像素等于多少个设备像素，决定提供高清图片的倍数。

基于美术设计

多数情况下，为不同场景准备的图片都是由同一张大图等比缩放来的。但是当图片缩放后，这张图片所表达的重点（图中人物模糊不清）将发生“偏移”。对此，对于同一张图片，针对不同设备要对图片进行精心的裁剪。

srcset 语法

为同一个 高性能响应式 Web 开发实战读书笔记（四）响应式图片 - 图3 元素提供多张图片，并且 高性能响应式 Web 开发实战读书笔记（四）响应式图片 - 图4 元素可以有选择性的加载图片。

当设备像素比为 2 时加载 lage,jpg，当设备像素比为 1 时，加载 samll.jpg。当 srcset 属性无法被识别时，加载默认 src 属性中的 samll.jpg。

  1. <img src="samll.jpg" srcset="large.jpg 2x, samll.jpg 1x">

srcset 属性是由一系列由逗号分隔的字符串组成，每段被分割的字符串又是由一个图片地址和对应的期望匹配的设备信息组成。设备描述信息可以被为两类，视口宽度（像素值，但视口宽度值后面加上 w 结尾）和像素密度（设备像素比加上 x 结尾）。

  1. <img src="samll.jpg" srcset="large.jpg 480w, samll.jpg 320w">

移动优先还是桌面优先

视口宽度与设备像素比不同的地方在于，设备像素比描述的是精确值，即某种图片只适应于指定设备像素比的设备。宽度描述的是边界值，即视口在某个范围使用哪张图片。

大部分浏览器使用的是移动端优先，只有当视口超过某个值时才加载更大的图片。但是这并不意味着桌面优先是错的或者是弱的，只是目前无法同时满足。

srcset 的缺点

当想匹配不同的视口和分辨率时，需要添加新的代码。如果其中一个图片尺寸发生变化，那么这张图片不再适应于它的匹配条件，甚至影响他其它的匹配条件。

元素

sizes

语法： sizes="[media query] [length], [media query] [length] ... , [length] etc" 。
[media query] 代表匹配的条件，[length] 代表查询条件下的图片所占用的宽度。

设置 sizes 属性的同时也要设置 srcset 属性。只需要告诉浏览器有哪些图片（srcset），需要在什么情况下变化为何种宽度（sizes），剩下的事情浏览器会根据当前情况自动从提供的图片中选取，给出最优方案。

  1. <img 
  2. sizes="(max-width : 640px) 100vw, (max-width : 960px) 50vw calc(100vw / 3)" 
  3. srcset="large.jpg 1024w, medium.jpg 640w, samll.jpg 320w">

元素和 元素

在美术场景下，为设备选取正确的图片要经过两次选择：

  • 为设备选择裁剪后正确的图片，这里简称裁剪版本。
  • 在裁剪版本的基础上，针对设备像素、视口密度的情况，再一次选择缩放后的版本，这里称为缩放版本。
  1. <picture>
  2.   <source media="(max-width: 640px)" srcset="samll.jpg 320px">
  3.   <source media="(max-width: 640px)" srcset="medium.jpg 640px">
  4.   <source srcset="large.jpg 1024px">
  5.   <img src="small.jpg" alt="small img">
  6. </picture>

必须使用 高性能响应式 Web 开发实战读书笔记（四）响应式图片 - 图5 元素， 只是为 元素提供图片素材，它是数据源。只有 的媒体查询精确匹配，才会将对应的图片加载到 高性能响应式 Web 开发实战读书笔记（四）响应式图片 - 图6 元素上，图片才能显示。 的媒体查询不能由浏览器自我决策。

不再使用图片

数据 URI

将图片自身通过 Base64 编码转化为图片元素的 URI 使用。

CSS 形状

  • 圆形
  • 三角形
  • 更复杂的图形

    字体图标

比文字直接，表达性更强。

伪元素

一些无意义的标签，比如图标常用伪元素实现。

图标字体

和图片相比，字符图标的益处是能够随意地缩放大小、改变颜色，设置添加阴影、改变不透明度等。缺点是需要在线加载的字体文件体积都比较大（不过已经有了改良，允许自定义需要的字符集、提供 CDN）。

参考

【1】高性能响应式 Web 开发实战 @ 李光毅