响应式图片

使用media query 

处理响应式图片最考虑三方面

1、图片需要的渲染大小

2、屏幕的密度

3、规划好的各尺寸图片大小

 

当知道这三个方面后，只需要从规划好的各尺寸图片里选择比  图片渲染面积*屏幕密度   大的图片文件就可以

 

但在响应式布局里面图片需要的渲染大小是无法确定的（通常图片设为max- 100%）

 

media query 可以回避这个问题，通过

1、viewport 大小

2、图片的大小相对于viewport

 

假设规划三张图

large.jpg (1024 x 768)                  rendered width（image’s width relative to viewport ×  viewport width） × screen density  > next-smallest-file’s width  采用

medium.jpg (640 x 480)               image’s width relative to viewport ×  viewport width × screen density  > 640px

small.jpg (320 x 240)

 

最后根据屏幕密度和视窗大小计算

<picture>  新标签

  <source src="large.jpg"

          media="( (min-device-pixel-ratio: 1.5) and (min- 20.001em) and (max- 35.999em) ) or

                 ( (max-device-pixel-ratio: 1.5) and (min- 120.001em) ) or

                 ( (min-device-pixel-ratio: 1.5) and (min- 60.001em) )" />

  <source src="medium.jpg"

          media="( (max-device-pixel-ratio: 1.5) and (min- 20.001em) and (max- 35.999em) ) or

                 ( (max-device-pixel-ratio: 1.5) and (min- 60.001em) ) or

                 ( (min-device-pixel-ratio: 1.5) and (min- 10.001em) )" />

  <source src="small.jpg" />

 

  <!-- fallback -->

  <img src="small.jpg" alt="A rad wolf" />

</picture>

（而且改方案还没考虑到device-pixel-ratio大于2或者小于1，1-2之间的表现也不是很好）

 

使用srcset+ sizes(目前没有浏览器支持)

<img src="small.jpg"

     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

     sizes="100vw"

     alt="A rad wolf" />

 

http://ericportis.com/posts/2014/srcset-sizes/

 

 

响应式网页设计

http://isux.tencent.com/responsive-web-design.html

 

 

 

使用picture之后