css百分比布局遇到的問題？

01-21

css在用百分比布局的時候縮小瀏覽器窗口頁面內元素寬度會變化，現在很多頁面都適當採用百分比布局，但是如果縮小瀏覽器窗口大小的話布局就會亂，比如知乎也存在這樣的問題。我的問題如下：
1.如上述所說，出現這種情況我們只是需要設置一個最小寬度？
2.如果設置了最小寬度，那麼在小解析度下就不能做到平鋪整個屏幕了，也就是會出現滾動條，這個有什麼辦法解決嗎？或者說只能這樣了

3.如果需要兼容IE低版本要怎麼做（我看慕課網都只支持IE9及以上的了），低版本不支持min-屬性，雖然現在都在高版本了，但是不乏變態需求都必須要兼容IE6以上
4.如果頁面元素寬度變化，背景圖片會被擠扁，這個又怎麼破？
5.大家平時做頁面，一個樣式適應所有解析度都是採用的什麼方法？

百分不是萬能的。如果你想僅通過百分比來讓所有的終端適配你的頁面效果，這顯然是不可能的。

１、在body中設置一個最小寬度，是為了避免頁面從寬到窄時，造成右邊區域不顯示背景；其二所起的功能就是在一些解析度下布局不影響布局

２、你要在不同分辯讓布局不出問題，目前比較傻的辦法就是通過媒體查詢（media queries）來實現,也就是響應式布局，在不同的地方改變他的布局，比如三欄布局==&>兩欄布局==&>一列布局。

３、如果你的業務需求還要兼容IE低版本，要實現同等效果，難度相對會比較大一些，你需要依賴一些js代碼來實現。早期的辦法是通過js來判斷為不同的解析度下載入不同的樣式。現在的話也有js來處理，讓IE低版本也支持media queries 從而不影響你的布局。另外一種就是說服你的客戶，在低版本下IE，降級處理，達到一定的寬度就不讓他再變小了。

４、圖片被擠壓，差一點的辦法就是使用CSS3 Background-size　來處理。好一點的就是CSS3 Background-size　和　media queries ，並同時在不同的解析度下載入不同的背景圖片。先進一點的可以採用Srcset（周刊1#：Srcset專刊）來處理。

5、字型大小的大小，完全可以使用rem來處理了。(Web排版的縮放)

更多相關的可以考慮看一些Responsive | 博客自由標籤　。

以上僅是自己愚見，如有不對，希望不會誤人子弟，也請同行朋友指正其中不對之處。謝謝！

你可以去了解一下響應式Web設計，響應式Web設計理念或許能幫助你解決這個問題。

提前設置頁面尺寸，後用hight,width: auto 即可設置位置百分比