web图像的常见应用策略与技巧.docVIP

  • 6
  • 0
  • 约4.38千字
  • 约 13页
  • 2018-06-18 发布于江苏
  • 举报
web图像的常见应用策略与技巧

web图像的常见应用策略与技巧   本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。      1. 响应式图像的应用与回退   特点:应用简单,上手容易,性能表现良好   难点:lazyload实现   根据不同设备,不同分辨率,不同像素比使用的响应式图像,常用的有两种场景:   1.1 固定尺寸图像   基于设备像素比选择,很多网站logo就是固定宽度图像的一个例子,不管viewport的宽度如何,始终保持相同的宽度。   在dom里图像与在css里的图像写法如下面的例子      1.2 不固定尺寸图像   与内容相关的图片,在需要响应式的时候,它们的大小往往并不是不变的,会随viewport改变,对于这类图像,也有两种常用的处理方式   1.2.1我们使用srcset搭配w描述符以及sizes属性   w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的,由逗号分隔的列表。根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。   sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。   比如:      我们来逐条读这一个im

文档评论(0)

1亿VIP精品文档

相关文档