响应式图片

最近在做响应式的网站，发现使用大幅图作为网页背景图出现了很多问题。




一张全屏、高质量的图片的大小是非常大的。这会造成加载网页速度变慢，你需要权衡利弊。


需要记住的点有：
1.在使用背景图片之前最好要研究一下平均屏幕分辨率的问题。一般的方法是使用一些分析软件去查看已经存在的网站，例如：


Google Analytics。除此之外，还可以了解一下屏幕分辨率总体趋势。就目前来说，建议使用1024 × 768 或 1200 × 800的尺寸


。
2.使用高质量的图片缩小要比低质量的图片放大效果要好得多。如果你准备在所有的设备上都使用同一张背景图片，那么建议使用


一张高质量的图片来做背景图片。
3.通常情况下，不要使用CSS来改变背景图片的宽高比，也就是说，不要为了填充整个屏幕而改变图片的比例。你需要在空白部分使


用background-color来填充某些颜色。
4.你所选择的图片的内容一定要清晰可见。


5.使用CSS来动态改变背景图片的大小是非常容易的事情。我们可以通过 CSS3 的一个属性background-size来完成这项工作。当你


在页面上使用 background-size 的时候可以有一些选择：设置值为 cover 可以动态缩放图片，使图片总是占据屏幕的最大宽度和


高度。background-size:cover属性的一个缺点是老的浏览器不支持它。在老的浏览器上需要一个替代方案，可以设置背景图片宽度


为100%。另外，你可以使用background-size:contain来设置背景图片。该属性优先照顾图像，它会将图片完全显示。
选择哪种方案来制作背景图像，你需要仔细考虑。不管选择哪一种，你都需要为背景设置一个background-color来作为背景色填充


某些空白区域。这也是在图片加载失败时的一种回退方法！
6.通过background-size属性，你可以告诉浏览器一个元素的背景图像有多大。更为神奇的是，这个属性支持两个非常好用的值：


contain 和cover。
  Contain ：调整背景图像的大小，使它完全适合元素的大小。
  Cover ：这个值使元素的背景完全被图像覆盖。图像会调整到一个刚好适合元素的尺寸，可以看下面的图片比较一下两种效果。


我们将使用Cover属性来制作全屏背景图像。








CSS宽有13种：


320、360、375、384、400、533、600、768、800、853、1024、1280、1366


CSS高有15种：


360、480、533、568、569、600、640、667、720、768、800、853、960、1024、1280


考虑到屏幕可能变为竖屏，那么综合一下共20种:


320、360、375、384、400、480、533、568、600、640、667、720、768、800、853、853、960、1024、1280、1366


划分一下，大致是：


第一档在小屏幕手机：320~384
第二档在note/pad：400~900
第三档在桌面端：960~
在实际项目中统计的结果表明，手机屏幕的宽度中的95%还在320~375宽。保证手机版画面主体内容在320宽内即可。




其他解决办法：http://caibaojian.com/3-solutions-for-responsive-image.html