HTML5 自适应视图宽

■知识点

    W描述符可以简单理解为描述源图的像素大小，无关宽度还是高度，大部分情况下可以理解为宽度。如果没有设置sizes, —般是按照1OOvm来选择加载图片。

■实例设计

    本例设计：如果视口在500px及以下时，使用500w的图片；如果视口在lOOOpx及以下时，使用1000w的图片，以此类推。最后再设置如果媒体查询都满足的情况下，使用2000w的图片。

    实现代码如下所示：

    <img width="500" srcset="

        images/2000.png 2000w, 

        images/1500.png 1500w, 

        images/1000.png lOOOw, 

        images/500.png 500w

        "

    sizes="

        (max-width: 500px) 500px,

        (max-width: lOOOpx) lOOOpx,

        (max-width: 1500px) 1500px,

    2000px "

    src="images/500 .png"

/>

    如果没有对应的w描述，一般选择第一个大于它的。例如，如果有一个媒体查询是700px, 一般加载1000w对应的源图。

    下面再设计一个示例，尝试使用百分比来设置视口宽度。

<img width="500" srcset="

        images/2000.png 2000w, 

        images/1500.png 1500w, 

        images/1000.png lOOOw, 

        images/500.png 500w

        "

    sizes="

        (max-width: 500px) lOOvm,

        (max-width: lOOOpx) 80vm,

        (max-width: 1500px) 50vm,

        2000px "

    src="images/500.png"

/>

    这里设计图片的选择：视口宽度乘以1、0.8或0.5,根据得到的像素来选择不同的w。例如，如果viewport为800px，对应80vm，就是800><0.8=640px该加载一个640w的源图，但是srcset中没有640w，这时会选择第一个大于640w的，也就是1000w。如果没有设置，一般是按照100vm来选择加载图片。