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

HTML5 自适应像素比

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

■知识点

    除了source元素外,HTML5为img元素也新增了srcset属性。srcset属性是一个包含一个或多个源图的集合,不同源图用逗号分隔,每一个源图由下面两部分组成。

    图像URL。

    x(像素比描述)或w (图像像素宽度描述)描述符。描述符需要与图像URL以一个空格进行分隔,w描述符的加载策略是通过sizes属性里的声明来计算选择的。


    如果没有设置第二部分,则默认为lx。在同一个srcset里,不能混用x描述符和w描述符,或者在同一个图像中,既使用x描述符,也使用w描述符。

    sizes属性的写法与srcset相同,也是用逗号分隔的一个或多个字符串,每个字符串由下面两部分组成。

    媒体查询。最后一个字符串不能设置媒体查询,作为匹配失败后回退选项。

    图像size (大小)信息。注意,不能使用%来描述图像大小,如果想用百分比来表示,应使用类似于vm (lOOvm = 100%设备宽度)这样的单位来描述,其他的(如px、em等)可以正常使用。

    sizes里给出的不同媒体查询选择图像大小的建议,只对w描述符起作用。也就是说,如果srcset里用的是x描述符,或根本没有定义srcset,这个sizes是没有意义的。

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

相关视频回答
回复(0)

特邀嘉宾

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

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

向TA咨询

该嘉宾的QQ群

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