兩種方式，一種是直接在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

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

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

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

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

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

總結

以上是生活随笔為你收集整理的html自动适应屏幕分辨率,关于HTML的屏幕分辨率适配的方法，求主流HTML自适应方法。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。