兩種方式,一種是直接在link中判斷設備的尺寸,然后引用不同的css文件:
< link rel ="stylesheet" type ="text/css" href ="styleA.css" media ="screen and (min-width: 400px)">
意思是當屏幕的寬度大于等于400px的時候,應用styleA.css
在media屬性里:
< 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屬性相同
其實基本上就是樣式覆蓋~,判斷設備,然后引用不同的樣式文件覆蓋。
要注意的是由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要,否則會出現(xiàn)橫向滾動條。