img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题,比方说我需要在retina高的硬件上看到更细腻的图片,又或者我要在电脑看到的图片和在手机上的图片不一样。
解决以上问题,我们可以使用css 中的@media 去实现,可是代码量超出了想象。有了这功能我们就能很好的处理需求,接下来我做个简单的解释,循序渐进的给大家说明。
1. 高 retina
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x, mdn-logo-VHD.png 3x ">
游览器会在加载图片前判断要使用那个图片依据设备的retina。
*注意:所有的图片宽度都是一样,但是质量会改变
2.不同设备宽度使用不同图片
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 400px">
先了解sizes属相,size就是尺寸的意思,图片属性先判断目前要用那个宽度来找srcset
以上的例子是说小于600会使用200px, 不然就下一个表达式(400px)
假设现在设备的宽是700px,那么sizes就等于400px,在srcset里寻找400 以上或等于的图片。
-----
伙伴们一定有很多奇怪的想法,这里我就不一个一个的列出来了。
几项事物要注意,
-在使用sizes时,一定要使用srcset
-srcset 使用只能选着2x 或者 200w ,其中一个