css div網頁布局中當解析度小於等於1024px（畫素）時，div布局物件顯示1000px寬度，當解析度大於1024px時候顯示1200px寬度等需求。使用css實現改變瀏覽器顯示寬度從而實現布局的網頁寬度動態改變變化（網頁寬度自動隨瀏覽器顯示寬度而變寬變窄）。
隨著發展，越來越多的電腦使用者顯示屏解析度越來越高，但有的使用者還是使用1024px的解析度的顯示屏（根據幾個瀏覽器解析度統計平台得到資料現在使用1200解析度以下使用者極少，但我們css布局時仍然需要至少考慮1024px解析度使用者），如果網頁布局寬度固定到1200px，1024解析度使用者瀏覽網頁時瀏覽器下方會出現滾動條，為了解決這個問題，大家可以通過使用css3樣式判斷使用者瀏覽器寬度從而呼叫不同布局寬度。
使用css單詞與語法
複製**
**如下:
@media screen and (判斷屬性)
這裡注意花括號裡裝要變化css樣式選擇器。
三、不同解析度顯示不同寬度樣式案例
1、divcss小案例描述
我們首先設定乙個div盒子css命名為「.abc」，設定其高度為300px，css邊框為黑色；以及設定margin:0 auto布局居中。預先設定這兩個樣式是為了便於觀察。
我們通過手動拖拽瀏覽器顯示寬度，然後觀察此盒子寬度變化情況，當瀏覽器寬度調節到寬度不大於500px時，對應此盒子寬度顯示100px；調節瀏覽器寬度不大於901px時，顯示「.abc」對應盒子寬度顯示200px;當調節瀏覽器寬度大於1201px時，盒子物件寬度顯示1200px；當小於1200px時候顯示寬度為900px。
2、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排錯將導致判斷失效。
3、html**
複製**
**如下:
無標題文件
divcss5例項：我這個div寬度會隨瀏覽器寬度變化哦，試試改變瀏覽器寬度程式設計客棧
4、為了相容ie9以下版本瀏覽器需要加入乙個google的js，當然可以**引人html
複製**
**如下:
將js**放入標籤前即可，這裡直接引人google**js，你可以**此js檔案重新html引人即可。
5、完美相容各大瀏覽器html+css+js源**
複製**
**如下:
無標題文件
">divcss5例項：我這個div寬度會隨瀏覽器寬度變化哦，試試改變瀏覽器寬度
>
本文標題: css判斷不同解析度顯示不同寬度布局實現自適應寬度
本文位址: /web/css/82014.html
css判斷不同解析度顯示不同寬度布局實現自適應寬度
charset utf 8 無標題文件title abc media screen and min width 1201px css 注釋說明 設定了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 media screen and max width 1200px 設定了瀏覽器寬度不大...
css根據解析度顯示不同的css
css div網頁布局中當解析度小於等於1024px 畫素 時，div布局物件顯示1000px寬度，當解析度大於1024px時候顯示1200px寬度等需求。使用css實現改變瀏覽器顯示寬度從而實現布局的網頁寬度動態改變變化 網頁寬度自動隨瀏覽器顯示寬度而變寬變窄 隨著發展，越來越多的電腦使用者顯示屏...
Android不同解析度適配
適配可以分為 layout land 橫屏布局 layout port 豎屏布局 layout 1920x1080 或者layout land 1920x1080 layout port 1920x1080 注 如果適配的布局檔案中，沒有當前機型，當前機型會選擇相差最小的解析度的配置檔案進行適配 l...