CSS Examples and Source Code for Responsive Web Design

一、什麼是響應式設計

響應式設計是指網頁能夠根據不同終端、不同屏幕尺寸下的顯示設備，具有自適應的特點。在不同的屏幕大小、解析度或設備類型上，頁面能夠以最佳方式顯示，具有更好的可用性和用戶體驗。響應式設計的出現，解決了屏幕尺寸不同所帶來的顯示不全或失真等問題，也讓設計師和開發者實現了一站式設計，即一套代碼適配多個終端。

二、如何實現響應式設計

實現響應式設計通常需要使用媒體查詢、彈性網格布局、圖片相對尺寸和彈性容器等技術。其中媒體查詢是一種基於媒體類型、瀏覽器視口大小等條件來判斷並載入樣式的方法。通過設置不同的CSS規則和樣式表，我們可以針對不同的屏幕尺寸、解析度或設備類型，設置不同的樣式。

彈性網格布局(Flexible Grid Layout)是指頁面布局中，容器和柵格的尺寸可以根據屏幕尺寸自適應而變化的布局方式。通過使用彈性容器和柵格的class類，可以方便地控制頁面內容的布局形式，並實現頁面在不同屏幕尺寸下的自適應。同時，在響應式設計中使用的相對尺寸，包括百分比、em、rem等，也是實現響應式設計的重要手段，相對尺寸的使用，讓頁面可以根據相對尺寸自適應地縮放，從而實現在不同屏幕上的自適應。

最後，響應式設計還需要使用媒體查詢和CSS3的一些新屬性，比如Media Features, Flexbox, Grid等技術，這些技術在實現響應式設計時，可以提供更多的樣式和布局方式。

三、CSS示例和代碼

/*彈性容器和柵格*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex-grow: 1;
  height: 100px;
}

/*媒體查詢*/
@media screen and (max-width: 600px) {
  .flex-container > div {
    flex-basis: 50%;
  }
}

@media screen and (max-width: 400px) {
  .flex-container > div {
    flex-basis: 100%;
  }
}

/*Flexbox*/
.container {
  display: flex;
  flexDirection: row;
  justifyContent: space-between;
}

.item {
  flex: 1;
}

/*Grid*/
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background-color: #d23;
  border-radius: 3px;
  color: #fff;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  height: 100px;
}

以上是響應式設計中常用的三種技術，分別是彈性容器和柵格、媒體查詢、CSS3中的Flexbox和Grid布局。我們通過這些技術，可以根據不同的屏幕尺寸和設備類型，實現頁面的優化和自適應。同時，我們也可以根據實際需求，在這些代碼片段上進行修改和擴展，實現更靈活、更高效、更優美的響應式設計。