关于srcset，picture，size

   之前一直想好好总结一下响应式图片的知识，可是最近一直在忙着吸收张鑫旭大神所写的《css世界》里面的精华，今天翻看之前写的响应式项目才想起这档事。

废话多了点，直接进入正题吧。 img元素的srcset、sizes属性和picture元素是H5新增的内容，主要用来解决不同屏幕下的图片实现最佳的视觉效果

srcset 和 sizes属性

srcset是一个包含一个或者多个源图的源图容器，主要由图片地址和屏幕像素密度组成，不同的图片源直接用逗号分隔:

举个栗子:

<img alt="A cat"
       width="320" height="123"
       src="cat.jpg"
       srcset="cat-2x.jpg 2x,cat-3x.jpg 3x"
  >

这是尺寸固定，密度变化的栗子..src的作用就是如果浏览器不支持srcset就使用该地址的图片,srcset中的cat-2x.jpg就是图片地址，2x表示屏幕像素密度

尺寸和密度都变化时就需要用到sizes属性

如下面栗子

<img alt="A cat"
       src="panda-689.jpg"
       srcset="panda-689 689w,
               panda-1378.jpg 1378w,
               panda-500.jpg 500w,
               panda-1000.jpg 1000w
               "

       sizes="(min-width:1066px) 689px,
              (min-width:800px) calc(75vw - 137px),
              (min-width:530px) calc(100vw - 96px),
              100vw
              "
  >

关于picture元素

picture元素内部的source与img的关系像是相片与相框的关系，相框带有一个底图，当你有很多不同尺寸的图片时，你试图找到第一个合适尺寸的照片放到相框里，如果没有，就不放照片而用相框本身的底图，picture就是告诉你这个相框只能在这些图片里找合适的

栗子

当尺寸，密度，资源都变化时

<picture>
  	<source media="max-width:800px"

            srcset="image800.jpg 800w,
                    image1406.jpg 1406w
            "

            sizes="(min-width:530px) calc(100vw - 96px),
                   100vw"
  	 >

  	 <img alt="aaa"
          src="689.jpg"

          srcset="689.jpg 689w,
                  1378.jpg 1378w,
                  500.jpg 500w
                  1000.jpg 1000w"

         size="(min-width:1066px) 689px
                calc(75vw - 137px)"
  	 >
  </picture>

不同的图片类别

<picture>
  	 <source type="image/webpp"
  	         srcset="snow.webp">
  	 <img src="snow.jpg"
  	  alt="a cat">
  </picture>

好了。。以后有新栗子再补充。。

我觉得写博客可以加深对知识的理解，以前没有这个意识，现在恍然大悟（可能是因为年纪大了,呵呵呵........）

（完）