三、圖片

人們常說說“一圖勝千言”，確實(shí)如此。我們網(wǎng)頁中關(guān)于松餅的文字介紹再多，也沒有圖片有吸引力。下面我們就在頁面上方添加一張松餅的圖片（2000像素寬），效果類似引誘用戶往下看的大題圖。

哇，真是好大一張圖，它讓整個網(wǎng)頁看起來都失衡了，水平方向上圖片溢出了。不行，必須解決這個問題。可以用CSS給圖片指定固定寬度，但問題是我們想讓它能在不同大小的屏幕中自動縮放。比如，我們例子中的iPhone屏幕寬度為320像素，如果我們把圖片設(shè)置成320像素寬，那么iPhone屏幕旋轉(zhuǎn)后又怎么辦呢？這時候320像素變成了480像素。
解決方案很簡單，只要一行CSS代碼就可以讓圖片隨容器寬度自動縮放:

img {
 max-width: 100%;
}

回到手機(jī)上，刷新頁面，結(jié)果比較符合預(yù)期了。
這里聲明max-width規(guī)則，就是要保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）。此時，如果包含圖片的元素（比如包含圖片的body或div）比圖片固有寬度小，圖片會縮放占滿最大可用空間。

為什么不用width:100%?

要實(shí)現(xiàn)圖片的自動縮放，也可以使用更通用的 width 屬性，比如width:100%。然而，這條規(guī)則在這里并不適用。因?yàn)檫@條規(guī)則會導(dǎo)致它顯示得跟它的容器一樣寬。在容器比圖片寬得多的情況下，圖片會被無謂地拉伸。

四、手機(jī)瀏覽器內(nèi)核

在移動端，僅有四個獨(dú)立的瀏覽器內(nèi)核，分別為微軟的Trident、火狐的Gecko、開源內(nèi)核Webkit、Opera的Presto。
目前微軟的Trident在移動終端上主要為WP7、8系統(tǒng)內(nèi)置瀏覽器。Opera的Presto內(nèi)核主要為 Opera Mobile、OperaMini、歐朋瀏覽器以及歐朋HD Beta版。Webkit內(nèi)核的適用范圍則較為廣泛，Android原生瀏覽器、蘋果的Safari、谷歌Chrome(Android4.0使用)都是基于Webkit開源內(nèi)核開發(fā)的。

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

中國用戶的瀏覽器市場份額：

UC、Android內(nèi)置、Chrome、Safari、QQ Browser都是webkit內(nèi)核，從圖上看占了絕大部分的市場份額。
所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-，別的兼容比如-ms-都不寫。