在過去彈性布局對(duì)網(wǎng)站而言幾乎是一種奢侈品，當(dāng)時(shí)唯一的彈性設(shè)計(jì)只是在布局安排和字體設(shè)計(jì)方面。圖片動(dòng)不動(dòng)就破壞頁面布局，而且即使是那些彈性結(jié)構(gòu)元素，在極端情況下，也會(huì)破壞布局——它們可以有幾百像素的變化，可一旦從電腦大屏幕切換到上網(wǎng)本時(shí)常常就無法調(diào)整。現(xiàn)在，金華微網(wǎng)站開發(fā)的設(shè)計(jì)師告訴我們可以做到更大的彈性化。圖片尺寸可自動(dòng)調(diào)整，而且我們有應(yīng)對(duì)方案可以保證頁面布局不會(huì)遭到破壞，盡管在此過程中它們可能會(huì)被壓縮且難以辨認(rèn)。雖然這不是一勞永逸的辦法，但卻給了我們更多的選擇。設(shè)備橫屏豎屏可以瞬間切換，也能滿足較大的電腦屏幕切換到iPad。

?

?

?

?

?

?

?

如果瀏覽器窗口調(diào)得過小，圖像品質(zhì)也會(huì)相應(yīng)變得很低，但一定要確保網(wǎng)站名依舊可見、不被裁掉。所以，整個(gè)Logo圖片其實(shí)包括兩部分：插圖之一是背景圖片，圖片尺寸不會(huì)改變，但在調(diào)整中會(huì)被裁切；而文字部分則是與窗口成比例地進(jìn)行縮放。響應(yīng)式網(wǎng)站設(shè)計(jì)面臨的一個(gè)主要問題是圖片處理。圖片成比例縮放的辦法多種多樣，且大多都很簡單。最流行的方法是使用CSS中的max．width屬性，只要沒有其他涉及寬度的圖片樣式覆蓋掉這個(gè)規(guī)則，每張圖片都會(huì)按照原先的尺寸加載下來，除非可視部分要窄于圖片原始寬度。圖片最大寬度是100％的屏幕寬度或?yàn)g覽器寬度，因此當(dāng)這100％的基數(shù)變窄時(shí)，圖片也會(huì)相應(yīng)變窄。

?

IE瀏覽器并不支持max．width屬性，但可以很好地利用寬度屬性：100％寬度值可以輕松解決IE瀏覽器樣式表中的問題。另一個(gè)問題是，Windows中一些比較老的瀏覽器在圖片縮放得過小時(shí)，可能渲染效果不會(huì)太清晰。不過Ethan Marcotte的文章提供了一個(gè)Java腳本，可以解決這個(gè)問題。雖然上述方法是響應(yīng)式圖片設(shè)計(jì)的一個(gè)很好的修補(bǔ)方法，也是個(gè)不錯(cuò)的開始，但金華微網(wǎng)站開發(fā)認(rèn)為圖片分辨率和加載時(shí)間應(yīng)該是第一考慮要素。盡管為移動(dòng)設(shè)備調(diào)整圖片大小易如反掌，但如果圖片原始尺寸是按照較大設(shè)備而設(shè)置的，那么它的加載速度就會(huì)變得非常慢，而且會(huì)占據(jù)不必要的空間。

?