本文目錄導讀：

1. 使用媒體查詢
2. 使用百分比布局
3. 使用Flexbox布局

響應式布局在CSS中的應用

響應式布局是一種設計網(wǎng)頁的方法，它使得網(wǎng)頁能夠自適應不同大小的屏幕，無論是桌面電腦、平板電腦還是手機，都可以獲得良好的用戶體驗，在CSS中，我們可以使用多種技術(shù)來實現(xiàn)響應式布局。

使用媒體查詢

媒體查詢是CSS3中新增的功能，它可以根據(jù)設備的特性（如寬度、高度、分辨率等）來應用不同的樣式，我們可以使用@media規(guī)則來定義不同屏幕下的樣式。

@media screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
}

上述代碼表示，當屏幕寬度小于等于600px時，.container元素的寬度將變?yōu)?00%。

使用百分比布局

在CSS中，我們可以使用百分比來定義元素的寬度和高度，這樣可以讓元素的大小根據(jù)父元素的大小而變化。

.container {
  width: 100%;
}
.box {
  width: 50%;
  height: 50%;
}

上述代碼表示，.box元素的寬度和高度都是.container元素的一半。

使用Flexbox布局

Flexbox布局是一種非常強大的布局方式，它可以輕松地實現(xiàn)元素的水平和垂直對齊，并且可以輕松地調(diào)整元素的大小和位置。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

上述代碼表示，.container元素中的子元素將在水平和垂直方向上居中對齊。

響應式布局在CSS中的應用還有很多，上述只是其中的一部分，通過學習和實踐這些技術(shù)，我們可以設計出更加適應各種設備的網(wǎng)頁，提高用戶體驗。