关于响应式布局，你必须要知道关于响应式布局的几件事(2)

三、图片

人们常说说“一图胜千言”，确实如此。我们网页中关于松饼的文字介绍再多，也没有图片有吸引力。下面我们就在页面上方添加一张松饼的图片（2000像素宽），效果类似引诱用户往下看的大题图。

哇，真是好大一张图，它让整个网页看起来都失衡了，水平方向上图片溢出了。不行，必须解决这个问题。可以用CSS给图片指定固定宽度，但问题是我们想让它能在不同大小的屏幕中自动缩放。比如，我们例子中的iPhone屏幕宽度为320像素，如果我们把图片设置成320像素宽，那么iPhone屏幕旋转后又怎么办呢？这时候320像素变成了480像素。
解决方案很简单，只要一行CSS代码就可以让图片随容器宽度自动缩放:

img {
 max-width: 100%;
}

回到手机上，刷新页面，结果比较符合预期了。
这里声明max-width规则，就是要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的body或div）比图片固有宽度小，图片会缩放占满最大可用空间。

为什么不用width:100%?

要实现图片的自动缩放，也可以使用更通用的 width 属性，比如width:100%。然而，这条规则在这里并不适用。因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。

四、手机浏览器内核

在移动端，仅有四个独立的浏览器内核，分别为微软的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。
目前微软的Trident在移动终端上主要为WP7、8系统内置浏览器。Opera的Presto内核主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版。Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

兼容的前缀：
1   -ms-
2   -moz-
3   -o-
4   -webkit-

中国用户的浏览器市场份额：

UC、Android内置、Chrome、Safari、QQ Browser都是webkit内核，从图上看占了绝大部分的市场份额。
所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-，别的兼容比如-ms-都不写。