三、圖片

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

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

img {
 max-width: 100%;
}

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

為什么不用width:100%?

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

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

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

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

中國(guó)用戶(hù)的瀏覽器市場(chǎng)份額：

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