本文目錄導(dǎo)讀：

1. 基本的媒體查詢結(jié)構(gòu)
2. 判斷屏幕寬度的方法
3. 響應(yīng)式設(shè)計的實際應(yīng)用

如何優(yōu)雅地使用CSS判斷屏幕寬度

在CSS中，我們可以使用媒體查詢（Media Queries）來判斷屏幕的寬度，從而實現(xiàn)響應(yīng)式設(shè)計，媒體查詢是CSS3中的一個新特性，它允許我們根據(jù)設(shè)備的屏幕寬度、高度、方向等特性來應(yīng)用不同的CSS樣式。

基本的媒體查詢結(jié)構(gòu)

媒體查詢的基本結(jié)構(gòu)如下：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上述代碼表示，當(dāng)屏幕寬度小于或等于600px時，頁面背景色將變?yōu)榈{(lán)色。

判斷屏幕寬度的方法

在媒體查詢中，我們可以使用max-width和min-width屬性來判斷屏幕的寬度范圍，如果我們想判斷屏幕寬度是否在600px到900px之間，可以寫成：

@media screen and (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

這樣，當(dāng)屏幕寬度在這個范圍內(nèi)時，頁面背景色將變?yōu)榈G色。

響應(yīng)式設(shè)計的實際應(yīng)用

通過媒體查詢，我們可以實現(xiàn)各種復(fù)雜的響應(yīng)式設(shè)計，如側(cè)邊欄的顯示與隱藏、表格的響應(yīng)式布局等，我們可以根據(jù)屏幕寬度來切換導(dǎo)航菜單的顯示方式：

@media screen and (max-width: 600px) {
  .nav-menu {
    display: none;
  }
  .nav-menu-mobile {
    display: block;
  }
}

這樣，在屏幕寬度小于或等于600px時，導(dǎo)航菜單將隱藏，而移動端的導(dǎo)航菜單將顯示。

使用CSS的媒體查詢功能，我們可以輕松地判斷屏幕寬度，從而實現(xiàn)響應(yīng)式設(shè)計，提升用戶體驗。