RWD

Billy Chu in Kaohsiung

2020-02-14

響應式網頁設計的版型設計。

# 1. 首先要介紹的是放在`<head></head>`內的`<meta>`標籤：

大部分的情況需設定的內容如下。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

關於 viewport 還有其他屬性可供設定：

width：寬度。
height：高度。
Initial-scale：初始縮放比例。
minimum-scale：最小縮放比例。
maximum-scale：最大縮放比例。
user-scalable：是否允許使用者改變縮放比例。

# 2. 選擇瀏覽器大小的設定順序：

從電腦瀏覽器開始 - 由大的瀏覽器寬度寫到小的。

@media (max-width: 1024px) {
  // content for 平板瀏覽器
}

@media (max-width: 768px) {
  // content for 手機瀏覽器
}

從手機瀏覽器開始 - 由小的瀏覽器寬度寫到大的。

@media (min-width: 768px) {
  // content for 平板瀏覽器
}

@media (max-width: 1024px) {
  // content for 電腦瀏覽器
}

# 3. 使用流動式或比例式排版：

流動式 - 讓網站的元素隨著容器寬度流動。
比例式 - 依照網頁寬度，調整各個元素的大小。

# 4. 使用相對比例配置網頁：

不要直接把元素的寬度及高度寫死，以便在各個瀏覽器寬度下都可以變動。

ul {
  li {
    width: 30%;
  }
}

@media (max-width: 1024px) {
  ul {
    li {
      width: 45%;
    }
  }
}

@media (max-width: 768px) {
  ul {
    li {
      width: 90%;
    }
  }
}

# 5. 針對不同瀏覽器，調整文字大小：

在瀏覽器斷點確認後，可以先編寫 css 的文字大小變數，日後也可一次做修改。

# 1. 首先要介紹的是放在<head></head>內的<meta>標籤：

# 2. 選擇瀏覽器大小的設定順序：

# 3. 使用流動式或比例式排版：

# 4. 使用相對比例配置網頁：

# 5. 針對不同瀏覽器，調整文字大小：

# 1. 首先要介紹的是放在`<head></head>`內的`<meta>`標籤：