兩種方式，一種是直接在link中判斷設備的尺寸，然后引用不同的css文件：

< link rel ="stylesheet" type ="text/css" href ="styleA.css" media ="screen and (min-width: 400px)">

意思是當屏幕的寬度大于等于400px的時候，應用styleA.css

在media屬性里：

• screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
• and 被稱為關鍵字，其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)
• (min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的特性參看 相關的Media features部分

< link rel ="stylesheet" type ="text/css" href ="styleB.css" media ="screen and (min-width: 600px) and (max-width: 800px)" >

意思是當屏幕的寬度大于600小于800時，應用styleB.css

其它屬性可看這里：http://www.swordair.com/blog/2010/08/431/

另一種方式，即是直接寫在標簽里：

@media screen and (max-width: 600px) { /*當屏幕尺寸小于600px時，應用下面的CSS樣式*/ .class { background : #ccc ; } }

寫法是前面加@media，其它跟link里的media屬性相同

其實基本上就是樣式覆蓋~，判斷設備，然后引用不同的樣式文件覆蓋。

要注意的是由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要，否則會出現橫向滾動條。

留名留名!!!,同樣的問題,看看咋結局!!!

留名留名!!!,同樣的問題,看看咋結局!!!