前端面试题————响应式设计之DIP与srcset/size

Posted 前端三剑客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试题————响应式设计之DIP与srcset/size相关的知识,希望对你有一定的参考价值。

前端面试,总是会被问到这样一类问题:

 

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

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

前端面试题————响应式设计之DIP与srcset/size

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

前端面试题————响应式设计之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">

正如我上一篇文章中提到的,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.jpg1x, people_2x.jpg 2x” alt=”people”>

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

window.devicePixelRatio

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

 

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

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

这里的w单位不是px,而是图片实际的大小。如果浏览器的宽度是400px,那么这三张图片对应的比例就分别是:

500/400 = 1.25

1000/400 = 2.5

1500/400 = 3.75


w单位告诉浏览器不同分辨率下应该显示哪张图片,因此浏览器可以根据自己屏幕大小和屏幕像素密度,选择合适的图片下载显示。例如,设备像素比例是2x,那么,就必须选择比例超过 2的最小的图片进行下载,也就是medium.jpg1000w (比例是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 1000wsize=”60vw” alt=”image”>

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

 

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

以上是关于前端面试题————响应式设计之DIP与srcset/size的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题系列之-CSS及页面布局篇

Wordpress 将响应式 srcset 标题图像添加到主题

响应式图片 srcset 和sizes属性

前端面试题

如何为响应式图像使用 srcset 和尺寸

scss 响应式图像,srcset,图片标签