Skip to content

Latest commit

 

History

History
34 lines (32 loc) · 1.67 KB

响应式图片.md

File metadata and controls

34 lines (32 loc) · 1.67 KB

##响应式图片 在当前响应式设计和自适应设计的流行下，大部分web页面往往都兼容多终端设备，其中一个比较麻烦的问题就是图片的加载了。不同平台显然不可能用同一张大的图片，这样子不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰。让浏览器根据分辨率自动识别图片是最好的方法。 ###方法一： ####picture标签 引用HTML5新特性

  1. 创建标签

  2. 在标签内使用source元素

  3. 添加media属性

  4. srcset加载图片

  5. 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"/>                
 </picture>

###方法二： ####srcset属性

  1. img标签的新属性
  2. 配合sizes属性使用更好 srcset中的300w、600w、1200w类似于媒体查询，规定了不同宽度下应该加载的图片。当图片外围的宽度不为视口宽度的100%时，该属性会出现一些小问题，所以需要与sizes属性相配合。 sizes属性的媒体查询规定的是视口大小与其缩放比例 ###方法三： js或cookie控制服务器 详细参考