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

1. 基本的媒體查詢
2. 更復(fù)雜的布局調(diào)整

如何判斷屏幕寬度并優(yōu)化CSS布局

在CSS中，我們可以使用媒體查詢（media queries）來判斷屏幕寬度，并根據(jù)不同的寬度調(diào)整樣式和布局，這對于響應(yīng)式設(shè)計***關(guān)重要，可以確保網(wǎng)站在各種設(shè)備上都能良好地顯示和使用。

基本的媒體查詢

CSS媒體查詢允許我們根據(jù)設(shè)備的特定條件（如寬度、高度、顏色等）應(yīng)用不同的樣式，下面是一個簡單的例子，展示了如何根據(jù)屏幕寬度改變背景顏色：

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

在這個例子中，當(dāng)屏幕寬度小于或等于600像素時，背景色為淺藍(lán)色；當(dāng)屏幕寬度大于600像素時，背景色為淺綠色。

更復(fù)雜的布局調(diào)整

除了簡單的顏色調(diào)整，我們還可以根據(jù)屏幕寬度調(diào)整更復(fù)雜的布局，可以使用@media規(guī)則來更改網(wǎng)格布局（grid layout）或靈活布局（flexbox）。

@media screen and (max-width: 800px) {
  .container {
    display: flex;
    flex-direction: column;
  }
}
@media screen and (min-width: 801px) {
  .container {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

在這個例子中，當(dāng)屏幕寬度小于或等于800像素時，容器使用靈活布局，子元素垂直排列；當(dāng)屏幕寬度大于800像素時，容器使用網(wǎng)格布局，子元素水平排列。

通過CSS媒體查詢，我們可以輕松地根據(jù)屏幕寬度調(diào)整樣式和布局，確保網(wǎng)站在各種設(shè)備上都能良好地顯示和使用，這包括更改背景顏色、調(diào)整布局、更改字體大小等，通過精心設(shè)計的媒體查詢，我們可以創(chuàng)建出既美觀又實用的響應(yīng)式網(wǎng)站。