---
title: Astro課程 0713 - CSS(Day5)
tags: astro, css, RWD
---

# 作業
[網站](https://www.toyota.com.tw/tech_TNGA.aspx#/advantages)
- 整組只能使用2個絕對定位

[發問直播](https://www.youtube.com/watch?v=5DN3hqnTgN0)

## 時間軸
12:07 切五欄demo
12:10 5倍官網切版demo
12:40 RWD demo
14:00 Basis
14:15 sticky
15:10 RWD

# 切版問題討論
## 居中問題
- 調整`區塊`居中用哪個設定？
- 調整`區塊內`的 "文字" 居中用哪個設定？

## 頁面類型
- `清單`類型有哪些？

## 預先設定高度的問題
- RWD 做動態寬度可能出現哪些問題？
- 嘗試做 RWD 尺寸卻不會自動縮放，問題可能出現在哪裡？
- 內容溢出區塊怎麼處理？
- `overflow` 的三個設定 `hidden`、`scroll`、`auto` 的差別？

## 預設寬度的問題

- 用容器裝著固定寬度的原因是什麼？壞處是什麼？
（跟螢幕解析度後來變寬有關）

# 切版實作

## 分析

- 哪些區塊要先設定滿版？
- 哪些欄位有固定寬？比例大概是多少?
- 初切時有哪些部分設定可以共用？（先抓出網站內區塊相似的規則）

## 寫html

- `section` 和 `div`的差別？ （斷開連結）
- 在`container`裡為什麼用`padding`處理上下間距？（限制內容區域的寬度）

## RWD

- 如何調整螢幕尺寸? `@media screen`

# basis 基本值
主軸上面的長度
- `flex-basis` 是設定寬度還是高度？應該寫在父層還是子層？
- `flex:` 設定了哪三個尺寸？順序是？
- 當 `flex-basis` 尺寸要設定成 `0` 時要注意什麼？(會影響 IE)

# sticky

- 為什麼不用絕對方向名稱的方式(`left`, `right`)做分類?有什麼壞處? (RWD、修改彈性)
- `sticky`要設在資料比較多的地方、還是比較少的地方?
- `sticky` 會被固定在哪個範圍內？
- `sticky` 可以應用的地方？ (其他網站的例子：巴哈姆特)
- `sticky` 和 `fixed` 相比的差異? 捲到父層的底部之後會發生什麼事？

# RWD
媒體查詢

@media 裝置 and (條件) {
 要執行的內容
} 

- 條件 `min-width` 和 `max-width` 分別是指？
- 手機和平板的尺寸是？ (可以去哪裡查？) (992px)
- 條件的尺寸為什麼要從小的寫到大的？反過來寫會出什麼問題？

# RWD 動態寬度的計算方式

有三種寫法
1. calc
2. 手動計算。為什麼間距會隨著螢幕縮小而變小？（%）
3. 讓間距固定的方式。 (父層做border-box, padding內縮看起來像子層的margin)
- 下次上課：簡介如何把間距固定的方式寫成隔線系統?

# RWD練習題

設計一個RWD網站，
最大寬度1200px，每欄margin 10px
在`手機`上顯示為1欄；(小於768px)
在`平板直向`顯示為2欄；(768px以上)
在`平板橫向`顯示為3欄(`平板橫向`以上為992px)
桌機時顯示為6欄。

## 第一種: `calc`
[CodePen Demo](https://codepen.io/tingtinghsu/full/PoZBamW)

起手式: 設定外層

css

    .wrap {
      width: 100%;
      max-width: 1200px;
      margin: auto;
      display: flex;    
      flex-wrap: wrap;        
    }

接著先從小尺寸螢幕寫起。利用`calc`把百分比換算成px

    .item {
      width: calc(100% / 6 - 0.0125);
        /*   15/1200=0.0125     */
      margin: 15px;
      background-color: pink;
    }

寫其他的`@media`
calc有趣的是，單位(%和px)可混用計算

    @media screen and (min-width: 768px){
    /* 不管是哪種尺寸都會有欄位折到下一行的特性 */
        .wrap {
            display: flex;
            flex-wrap: wrap;
          }
        .item{
            width: calc(100% / 2 - 30px); 
            background-color: red;
        }
    }
    @media screen and (min-width: 992px){
      .item{
          width: calc(100% / 3 - 30px);
          background-color: orange;
        }
    }
    @media screen and (min-width: 1200px){
      .item{
          width: calc(100% / 6 - 30px);
          background-color: green;
        }
    }

## 第二種: 手動計算

css

    .wrap {
      background-color: #ccc;
      width: 100%;
      max-width: 1200px;
      margin: auto;
    }
    .item {
      /* width: calc(100% / 6 - 0.0125); */
      width: 100%;
      margin: 15px;
      background-color: pink;
    }
    @media screen and (min-width: 768px){
      .wrap {
        display: flex;
        flex-wrap: wrap;
      }
      .item{
        /* width: calc(100% / 2 - 30px);  */
        width: 46.09375%;
        /* 768 / 2 = 384, 384 - 30 = 354,  小數點後6位數  */
        background-color: red;
      }
    }
    @media screen and (min-width: 992px){
      .item{
          /* width: calc(100% / 3 - 30px); */
          width: 30.30914%;
          /* 992 /3 = 330.666667 - 30 = 300.666667再/992  */
          background-color: orange;
        }
    }
    @media screen and (min-width: 1200px){
      .item{
          /* width: calc(100% / 6 - 30px); */
          width: 14.166667%;
          /* 1200/6 = 200 - 30  = 170 再/ 200*/
          background-color: green;
        }
    }

## 第三種: 父層做border-box, padding內縮

多加一層`.col`包住每個`.item`，再由`.col`設定padding

css

    .wrap {
      width: 100%;
      max-width: 1200px;
      margin: auto;
      display: flex;    
      flex-wrap: wrap;        
    }
    .col {
      box-sizing: border-box;
      padding: 0 15px;
      width: 100%;
    }
    .item {
      background-color: pink;
      height: 500px;
      border: 2px solid #000;
    }
    @media screen and (min-width: 768px){
      .col {
        width: 50%;
      }
      .item {
        background-color: lightgreen;
      }
    }
    @media screen and (min-width: 992px){
      .col {
        width: 33.33333334%;
      }
      .item {
        background-color: lightblue;
      }
    }
    @media screen and (min-width: 1200px){
      .col {
        width: 16.6666667%;
      }
      .item {
        background-color: lightcoral;
      }
    }