CSS教程 根據不同屏幕大小顯示不同寬度布局

首先，需要了解@media 使用方法

1. @media screen and (判斷屬性){ CSS樣式選擇器 }

復制代碼

注意花括號里裝要變化CSS樣式選擇器

1、講解准備
首先設置一個DIV盒子CSS命名為“.abc”，設置其高度為300px，css邊框為黑色；以及設置margin:0 auto布局居中。預先設置這兩個樣式是為了便於觀察。
我們通過手動拖拽瀏覽器顯示寬度（也就是模擬的屏幕大小變化），然后觀察此盒子寬度變化情況，當瀏覽器寬度調節到寬度不大於500px時，對應此盒子寬度顯示100px；調節瀏覽器寬度不大於901px時，顯示“.abc”對應盒子寬度顯示200px;當調節瀏覽器寬度大於1201px時，盒子對象寬度顯示1200px；當小於1200px時候顯示寬度為900px。


2、CSS代碼

1. .abc{ height:300px; border:1px solid #000; margin:0 auto}
2. @media screen and (min-width: 1201px) {
3. .abc {width: 1200px}
4. }
5. /* css注釋：設置了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 */
7. @media screen and (max-width: 1200px) {
8. .abc {width: 900px}
9. }
10. /* 設置了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 */
12. @media screen and (max-width: 901px) {
13. .abc {width: 200px;}
14. }
15. /* 設置了瀏覽器寬度不大於901px時 abc 顯示200px寬度 */
17. @media screen and (max-width: 500px) {
18. .abc {width: 100px;}
19. }
20. /* 設置了瀏覽器寬度不大於500px時 abc 顯示100px寬度 */

復制代碼

需要注意是CSS代碼順序，由大到小排版CSS（判斷屏幕大小寬度越大越放前），這樣是因為邏輯關系，@media 判斷CSS排錯將導致判斷失效。

為兼容IE9以下版本瀏覽器需要加入一個google的JS，也可以下載后通過本地引人html
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

來源：我愛自學CSS教程