?
在過去彈性布局對網站而言幾乎是一種奢侈品,當時唯一的彈性設計只是在布局安排和字體設計方面。圖片動不動就破壞頁面布局,而且即使是那些彈性結構元素,在極端情況下,也會破壞布局——它們可以有幾百像素的變化,可一旦從電腦大屏幕切換到上網本時常常就無法調整。現在,
金華微網站開發的設計師告訴我們可以做到更大的彈性化。圖片尺寸可自動調整,而且我們有應對方案可以保證頁面布局不會遭到破壞,盡管在此過程中它們可能會被壓縮且難以辨認。雖然這不是一勞永逸的辦法,但卻給了我們更多的選擇。設備橫屏豎屏可以瞬間切換,也能滿足較大的電腦屏幕切換到iPad。
?
?
?
?
?
?
?
如果瀏覽器窗口調得過小,圖像品質也會相應變得很低,但一定要確保網站名依舊可見、不被裁掉。所以,整個Logo圖片其實包括兩部分:插圖之一是背景圖片,圖片尺寸不會改變,但在調整中會被裁切;而文字部分則是與窗口成比例地進行縮放。響應式網站設計面臨的一個主要問題是圖片處理。圖片成比例縮放的辦法多種多樣,且大多都很簡單。最流行的方法是使用CSS中的max.width屬性,只要沒有其他涉及寬度的圖片樣式覆蓋掉這個規則,每張圖片都會按照原先的尺寸加載下來,除非可視部分要窄于圖片原始寬度。圖片最大寬度是100%的屏幕寬度或瀏覽器寬度,因此當這100%的基數變窄時,圖片也會相應變窄。
?
IE瀏覽器并不支持max.width屬性,但可以很好地利用寬度屬性:100%寬度值可以輕松解決IE瀏覽器樣式表中的問題。另一個問題是,Windows中一些比較老的瀏覽器在圖片縮放得過小時,可能渲染效果不會太清晰。不過Ethan Marcotte的文章提供了一個Java腳本,可以解決這個問題。雖然上述方法是響應式圖片設計的一個很好的修補方法,也是個不錯的開始,但
金華微網站開發認為圖片分辨率和加載時間應該是第一考慮要素。盡管為移動設備調整圖片大小易如反掌,但如果圖片原始尺寸是按照較大設備而設置的,那么它的加載速度就會變得非常慢,而且會占據不必要的空間。
?