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

2022-09-25 13:27:09 字數 1737 閱讀 1761

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...