css根據解析度顯示不同的css

css div網頁布局中當解析度小於等於1024px（畫素）時，div布局物件顯示1000px寬度，當解析度大於1024px時候顯示1200px寬度等需求。使用css實現改變瀏覽器顯示寬度從而實現布局的網頁寬度動態改變變化（網頁寬度自動隨瀏覽器顯示寬度而變寬變窄）。

隨著發展，越來越多的電腦使用者顯示屏解析度越來越高，但有的使用者還是使用1024px的解析度的顯示屏（根據幾個瀏覽器解析度統計平台得到資料現在使用1200解析度以下使用者極少，但我們css布局時仍然需要至少考慮1024px解析度使用者），如果網頁布局寬度固定到1200px，1024解析度使用者瀏覽網頁時瀏覽器下方會出現滾動條，為了解決這個問題，大家可以通過使用css3樣式判斷使用者瀏覽器寬度從而呼叫不同布局寬度。

使用css單詞與語法

**如下:

@media screen and (判斷屬性)

不同解析度顯示不同寬度樣式案例

divcss小案例描述

我們首先設定乙個div盒子css命名為「.abc」，設定其高度為300px，css邊框為黑色；以及設定margin:0 auto布局居中。預先設定這兩個樣式是為了便於觀察。

我們通過手動拖拽瀏覽器顯示寬度，然後觀察此盒子寬度變化情況，當瀏覽器寬度調節到寬度不大於500px時，對應此盒子寬度顯示100px；調節瀏覽器寬度不大於901px時，顯示「.abc」對應盒子寬度顯示200px;當調節瀏覽器寬度大於1201px時，盒子物件寬度顯示1200px；當小於1200px時候顯示寬度為900px。

css**

**如下:

.abc

@media screen and (min-width: 1201px)  
} /* css注釋：設定了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 */
@media screen and (max-width: 1200px)  
} /* 設定了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 */
@media screen and (max-width: 901px)  } 
/* 設定了瀏覽器寬度不大於901px時 abc 顯示200px寬度 */
@media screen and (max-width: 500px)  } 
/* 設定了瀏覽器寬度不大於500px時 abc 顯示100px寬度 */ 
需要注意是css**順序，由大到小排版css（判斷瀏覽器寬度越大越放前），這樣是因為邏輯關係，@media 判斷css排錯將導致判斷失效。

**如下:

divcss5例項：我這個div寬度會隨瀏覽器寬度變化哦，試試改變瀏覽器寬度

doctype html> 

divcss5例項：我這個div寬度會隨瀏覽器寬度變化哦，試試改變瀏覽器寬度

根據解析度不同呼叫不同的css檔案

解 釋 var ie1024 var ie800 var ie1152 var ieother 引號裡面分別填寫，使用者使用ie的時候並且解析度為1024 768,800 600,1152 864要使用的css檔名。var firefox1024 var firefox800 var firefox...

根據解析度不同呼叫不同的css檔案

摘錄於 解 釋 var ie1024 var ie800 var ie1152 var ieother 引號裡面分別填寫，使用者使用ie的時候並且解析度為1024 768,800 600,1152 864要使用的css檔名。var firefox1024 var firefox800 var fir...

css判斷不同解析度顯示不同寬度布局實現自適應寬度

charset utf 8 無標題文件title abc media screen and min width 1201px css 注釋說明 設定了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 media screen and max width 1200px 設定了瀏覽器寬度不大...