前端图片不顶格显示_前端面试题————响应式设计之DIP与srcset/size

前端面试，总是会被问到这样一类问题：

图片标签中的srcset是做什么用的？size又是做什么的？

<meta name="viewport" content="width=device-width,initial-scale=1">是什么意思？

这些都是和响应式设计相关的知识点。响应式设计是一个比较庞大的话题，我们今天看看它的冰山一角——DIP和响应式图片中的srcset/size都是什么？

DIP

大家可能都会这样的经历，在手机上访问某个页面的时候，这个页面的大小并没有适应手机屏幕的大小，所有的东西都变得很小，你必须滚动或者缩放页面，才能进行正常阅读。这是因为网页的设计者并没有或者没有正确地设置viewport。

我们的浏览器使用的宽度像素，并不是你设备真正的硬件宽度像素，而是DIP，全称是设备独立像素（Device independent pixels）。比如，浏览器可视窗口（viewport）的DIP是800px，而硬件宽度是1600px，那么你浏览器当中的1px就对应硬件中的2px，设备像素比例（Device Pixel Ratio）就是2。

如果你没有在代码当中指定viewport，那么，浏览器会默认使用DIP为980px，在手机这种小屏幕设备中，设备宽度会很小，在很小的宽度中显示980px，所有东西自然都变地很小，难以阅读。因此，我们需要在HTML 的header当中加上这样一句话：

<meta name="viewport" content="width=device-width,initial-scale=1">

正如我上一篇文章《前端面试题————关键渲染路径（Critical Rendering Path）》中提到的，width=device-width是告诉浏览器页面宽度要符合设备的DIP（设备独立像素）宽度，页面通过reflow，使内容适应屏幕的大小，而initial-scale=1则告诉浏览器DIP与设备像素之间的比例为1（也就是设备像素比例为1） 。

Srcset/size

如果面试官问你，如何在不同尺寸的屏幕当中显示不同的图片呢？你可能会想到使用在不同的media query使用不同的image-background 。这个确实可行，但是本质上，是你定义了浏览器在哪个宽度下应该选择哪个图片，而浏览器并没有太多自主选择的权利。而且这种方法完全依赖CSS这个文件。相比之下，在HTML的img标签中使用srcset是一个更好的解决方案。

那么，srcset是什么呢？我们先看一个srcset的例子：

<img src=”people_1x.jpg” srcset=”people_1x.jpg 1x, people_2x.jpg 2x” alt=”people”>

这里面的1x和2x叫做图像密度描述符（pixel density descriptor），也就是介绍上面介绍DIP时候的设备像素比例，默认值是1x。有的朋友会问，我怎么知道某个屏幕是什么密度描述符呢？在浏览器开发者工具的console中，运行下面这行命令就可以查询：

window.devicePixelRatio

又有朋友会问，如果我的浏览器很旧，不支持srcset怎么办？恩，至少有src可以兜底的，浏览器会显示src当中的图片，虽然不是响应式，但是还是满足最基本的功能。

除了图像密度描述符，我们也可以使用w单位让浏览器选择图片，如下面这个例子：

<img src=”small.jpg” srcset=” small.jpg 500w, medium.jpg 1000w, large.jpg 1500w” alt=” image”>

这里的w单位不是px，而是图片实际的大小。

如果浏览器的宽度是400px，那么这三张图片对应的比例就分别是：

500/400 = 1.25
1000/400 = 2.5
1500/400 = 3.75

w单位告诉浏览器不同分辨率下应该显示哪张图片，因此浏览器可以根据自己屏幕大小和屏幕像素密度，选择合适的图片下载显示。例如，设备像素比例是2x，那么，就必须选择比例超过 2的最小的图片进行下载，也就是medium.jpg 1000w （比例是2.5）。

那么，有的朋友又有疑问了，屏幕的宽度又不是图片的宽度。我的屏幕是1500px的，设备像素比例是1，但是我在CSS当中定义的图片宽度是60vw，也就是900px。根据srcset提供的选择，我应该下载large.jpg 1500w这张图片，但是很明显，实际我只需要显示medium.jpg 1000w就够用了呀。

这是一个很好的问题，浏览器在下载解析CSS之前时，是很有可能会预加载一部分图片的，我们不能完全根据浏览器的窗口大小来选择下载哪张图片，因为这样，很有可能下载的图片过大，就如同上面朋友的问题中描述的那样。

那么，就轮到到size登场了。Size这个属性告诉浏览器，这张图片的显示大小是多少。我们把上面的例子修改一下：

<img src=”small.jpg” srcset=” small.jpg 500w, medium.jpg 750w, large.jpg 1000w” size=”60vw” alt=”image”>

当浏览器看到size=”60vw”的时候，他就可以计算出实际只需要medium.jpg这张图片就够了。但是注意：size只是告诉浏览器下载哪张图片，并能真正地更改图片的显示大小，我们仍需在CSS文件中设置width: 60vw，来把图片显示宽度定位屏幕宽度的一半。

如果你的图片在不同的浏览器窗口宽度显示不同的宽度的话，size也可以使用max-width等来帮你做调整，如下所示：

<img src=”small.jpg” srcset=” small.jpg 500w, medium.jpg 1000w, large.jpg 1500w” size=”(max-width: 750px) 100vw, 60vw” alt=”image”>

希望看完这篇文章之后，你能够回答开头提出的那两个问题了。祝大家前端学习一切顺利。

关注我的公众号：前端三剑客