小码农 – 响应式图片

小码农小码农

小码农

wordpress,laravel和前端知识学习

响应式图片

文章摘要:

在当前响应式设计和自适应设计的流行下,大部分web页面往往都兼容多终端设备,其中一个比较麻烦的问题就是图片的加载了。不同平台显然不可能用同一张大的图片,这样子不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰。让浏览器根据分辨率自动识别图片是最好的方法。 方法一: picture标签 引用HTML5新特性 创建标签 在标签内使用source元素 添加media属性 srcset加载图片 img元素避免老旧浏览器不识别picture标签和srcset属性 <picture> <source srcset="img/300.png" media="(min-width:300px)"> <source srcset="img/600.png" media="(min-width:600px)"> <source srcset="img/1200.png" media="(min-width:1200px)"> <img srcset="img/1200.png"/> &l......