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

?

?

?

?

?

?

?

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

?

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

?