在目前的前端开发中,我们经常需要进行响应式的网站开发。提起响应式,大家应该想到三个概念: 弹性布局, 弹性图片, 媒体查询。本文着重介绍一下弹性图片,也就是响应式图片的解决方案。
一、js或服务端
通过js或者服务端来控制图片的加载,原理就是跟踪window的resize事件,然后修改图片的路径,代码如下
<div class="content"> <img src="" alt=""/> </div> <script src="js/vendor/jquery.min.js"></script> <script> $(document).ready(function () { function makeImageResponsive() { var width = $(window).width; var img = $(".content img"); if (width <= 480) { img.attr('src', 'img/480.png') } else if (width <= 800) { img.attr('src', 'img/800.png') } else { img.attr('src', 'img/1600.png') } } $(window).on('resize load', makeImageResponsive()); }) </script>
这种形式还有一种类似的变种,就是通过把屏幕或者设备信息写入cookie,获取图片的时候在服务器端选择返回哪种图片,这样就不需要我们来写脚本了。
二、srcset
通过js或服务端加载确实可以达到响应式图片的目的,兼容性也非常的好,但是需要我们编码实现响应式的逻辑,在修改的时候也不是很方便属于命令式的实现,以下方法使用声明式的实现,就是把图片的地址声明在html中,由浏览器自行来决定如何加载,这样更加灵活,把展示的逻辑从硬编码中分离出来,降低了耦合。
现在html5中对于img标签新增了一个srcset属性。 属性值为以逗号分隔的一个或多个字符串。每个字符串由以下组成:
a. 一个图像的URL。
b. 可选的, 空格后跟以下的其中一个
~ 一个宽度描述符,后面紧跟’w’符号。
~ 一个像素描述符,后面紧跟’x’符号。
<img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"/>
设置srcset属性后浏览器会根据我们的页面不同,从当前的浏览环境进行感知,然后选择一个图片进行加载。当超过480时,加载的图片变成了800,当超过800时,图片变成了1600。但当我们把屏幕变小时,图片始终是1600,是因为浏览器已经在大的分辨率下加载了大的图片,那么会被默认放在缓存中,使用大的图片不再会有网络消耗,当然使用更大的图片更好咯。
新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html
三、sizes
当然这个属性可以配合sizes属性结合使用。sizes属性可以设置一些类似媒体查询的规则。 例如:
前面的第二种方法单独使用的话会有一个坑,就是例如当img的宽度只占50%,当我们加宽宽度的时候,加宽到480,但此时图片的宽度只有240,图片仍然变成了800。这时srcset属性就还需要配合sizes属性进行使用(第二种方法的sizes属性值默认为100vw)。
<div class="content"> <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="50vw"/> </div>
sizes属性内还可以写入媒体查询,例如
<style> html, * { margin:0; padding:0; } .content { 100%; margin:0 auto; } .content img { display: block; max- 100%; } </style> </head> <body> <div class="content"> <img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w" sizes="(min-800px) 800px, 100vm"/> </div>
就是当浏览器宽度小于800时,按照100vw来设置图片;但超过800时,就是定宽了。
四、picture标签
这个也是html5的新属性。 可以放置多个source标签,以指定不同的图像文件名,进而根据不同的条件进行加载。用法:
- 创建标签。
- 里面放置标签用来展示可能用到的图像
- 对source添加srcset属性来指定图片URL,添加media属性,来规定媒体查询。
- 添加一个回退的
元素
这个例子表示在大于800px的时候,展示ad002-l这个large图片。 在大于480px的时候,展示ad002-m这个medium图片。 否则,展示ad002小图片。
<picture> <source srcset='src/img/ad002-l.png' media='(min- 50em)'/> <source srcset='src/img/ad002-m.png' media='(min- 30em)'/> <img src="src/img/ad002.png"/> </picture>
现在很多浏览器对于picture这个标签还不支持,所以我们需要用到picturefill.js来解决。
五、svg图片
SVG图片不是一个简单的图像,而是一个规则。所以可是很好的响应式,不过因为比较复杂,所以一般都是对于一些简单的图像使用svg,对于复杂,颜色多的图片,不采用SVG。