位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 自适应视图宽

提问人:刘团圆发布时间:2020-11-23

■知识点

    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来选择加载图片。

继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
    返回顶部
    国产电影_2020最新好看的内地国产电影推荐_国产电影排行榜