图片元素得到广泛而迅速的传播（http://caniuse.com/#search=picture），我认为这是一种避免提供超大尺寸/不足尺寸图片的好方法，特别是当你想在100以上的手机和台式机上显示相同的图片时视口宽度的百分比。
这可以这样解决：
<img
srcset="large.jpg 1920w,
medium.jpg 720w,
small.jpg 360w"
src="medium.jpg">
这允许浏览器聪明并决定加载哪张图片，但我发现这种方法存在问题：许多移动设备的像素密度为2或更高！因此，当显示360w时，如果我们希望图像看起来清晰，我们实际上需要中等图像。可以这样做：
<picture>
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)">
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)">
<img src="http://goo.gl/LsuU9t">
</picture>
在我看来，这里的问题是，这可能会随着屏幕分辨率的增长而增长，并且我们失去了浏览器巧妙地决定最佳选择的好处。
所以，我的问题是两者之间是否有中间点，所以我仍然可以在html和css之间分开。
答案 0 :(得分：5)
浏览器在选择图像时会考虑像素密度。因此，具有360 CSS px宽视口和2x像素密度的设备将选择medium.jpg。这正是w描述符和sizes属性旨在解决的问题！不要在这里使用picture。