现在各种屏幕尺寸非常多,而且不同屏幕的分辨率差别也很大。
虽然,使用大尺寸图片,可以满足各种屏幕视觉上的要求,但是对小屏幕却带来了不必要的性能浪费。
img srcset属性 和 sizes属性,就是为了解决不同屏幕分辨率,不同尺寸图片的需求。
<img
src="/static/image.png"
srcset="/static/image4x.png 4x,
/static/image3x.png 3x,
/static/image2x.png 2x,
/static/image1x.png 1x ">
<img src="/static/image.png"
sizes="(max-width: 376px) 375px, (max-width: 769px) 768px, 1024px"
srcset="/static/image.png 375w,
/static/image768.png 768w,
/static/image1024.png 1024w">
暂无评论,抢个沙发...