---
# System prepended metadata

title: 1114 - html&CSS
tags: [HTML&CSS]

---

# 1114 - html&CSS

## RWD

### 尺寸計算

- padding 設定百分比，他的 100%是父層的寬度
- 設定`box-sizing: border-box`就不用算 padding，因為此時`width = border + padding + 內容的 width`
- 百分比計算方法：[子層每個大小] or [margin 大小] / [父層總大小] x 100

#### 選取器補充

- .col:nth-child(odd)
- 也可以設定偶數 even
  選取奇數物件（第一個開始數為 1）
![01-1](https://hackmd.io/_uploads/Skub43gNT.png)


```css
/* 把奇數個物件設為棕色*/
.col:nth-child(odd) {
  background-color: brown;
}
```

- an+b

  選取特定規則物件，規則為`a * n + b`
  `a` 和 `b` 值可以改變，a 改變的值可為 0 或是負值，b 僅可為 0 或是正數
  等於值可以為`an+b`,`an`,`an-b`,`n+b`,`n-b`,`-an+b`
- 範例 1
  把 2\*n+1 數個物件設為黃綠

![01-2](https://hackmd.io/_uploads/S1gz42gNa.png)


```css
/* 把2*n+1數個物件設為黃綠*/
.col:nth-child(2n + 1) {
  background-color: yellowgreen;
}
```

- 範例 2
  把前五個設為黃綠色(使用-n+5)

![01-3](https://hackmd.io/_uploads/rkDf4nlEp.png)


```css
/* 把前五個設為黃綠色*/
.col:nth-child(-n + 5) {
  background-color: yellowgreen;
}
```

### 媒體查詢

```css
@media screen and (條件){
        符合條件時， 會執行的CSS
      }
```

- 設定最小的寬度，如範例只要大於 768px 就符合此定義
- 為什麼設定 768px? 因為 ipad,ipad-mini 寬度為 768px
- 右鍵檢查可以看各螢幕尺寸
- 範例：
  **只要大於 768px，就會變水藍色**


```css
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
}

@media screen and (min-width: 768px) {
  .box {
    background-color: aqua;
  }
}
```

#### 製作手機 & 電腦的畫面

- 手機，寬度<375px，margin：20px
- PC，寬度>375px，margin:30px
- 先計算尺寸

```css
phone
total-width:375px
contain-width:167.5px;百分比44.6666667%
mid-margin:20px;5.3333%
left&right-margin:10px;2.666667%（非必要）

pc web
total-width:1200px
contain-width:210px;ratio:17.5%
mid-margin:30px;ratio:2.5%
left&right-margin:15px;ratio:1.25%(非必要)

```

- 先寫父層，不寫百分比就是 100%

```css
/* css */
<style>
      .box {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: auto;
      }
      .col {
        /* width: calc(100% / 2 -20px); */
         /*亦可用算數計算 */
        width: 44.66666%;
        height: 100px;
        background-color: pink;
        margin: 10px 2.6666%;
      }

      @media screen and (min-width: 768px) {
        .col {
        /* width: calc(100% / 5 -30px); */
        /* 亦可用算數計算 */
        width: 17.5%;
        margin: 10px 1.25%;
        }
      }
    </style>
```

- 使用--column

```css
   <style>
   /* 最小的裝置設定 */
      :root {
        --column-count: 2;
        --column-gap: 10px;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: auto;
      }
      .col {
        width: calc(100% / var(--column-count) - var(--column-gap) * 2);
        height: 100px;
        background-color: pink;
        margin: 10px var(--column-gap);
      }

      @media screen and (min-width: 768px) {
        .col {
          --column-gap: 15px;
          --column-count: 6;
        }
      }
    </style>
```

```css
/* html */
  <body>
    <div class="box">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </body>
```

### 裝置尺寸

### 媒體查詢寫法 & 斷點

![02-5](https://hackmd.io/_uploads/r1d7Nne4a.png)


1. 手機:width<768
2. 平板直:width>768
3. 平板橫:width>1024
4. 桌機:width>1200
5. 桌機:width>1440

- 將 CSS 寫成斷點

![2-6](https://hackmd.io/_uploads/rJ7VV2eVp.png)
```css
@media screen and (min-width: 768px) {
  .col {
    --column-gap: 15px;
    --column-count: 3;
  }
}
```
![2-7](https://hackmd.io/_uploads/By2N4hlNT.png)
```css
@media screen and (min-width: 1024px) {
  .col {
    --column-count: 5;
  }
}
```
![2-8](https://hackmd.io/_uploads/HklHN2eVp.png)
```css
@media screen and (min-width: 1200px) {
  .col {
    --column-count: 6;
  }
}
```
![2-9](https://hackmd.io/_uploads/rJXSV3eVT.png)
```css
@media screen and (min-width: 1440px) {
  .col {
    --column-count: 7;
  }
}
```

### media 的另外一種寫法

- 由小到大

```css
/* 大於或等於時產生作用*/
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 767px) {
}
```

- 由大到小

```css
/* 小於或等於時產生作用*/
@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
}
```

- 第三種寫法(由小到大)

```css
@media screen and (width >= 768px) {
}
```

- 僅限平板能看到（設定限定最小寬度＆最大寬度）

```css
@media screen and (min-width: 768 px) and (max-width: 1023px) {
}
/* 或寫成以下 */
@media screen and (768px < width < 1024px) {
}
```

### 格線系統

- 欄位常見欄數：1,2,3,4,6，取最小公倍數：12，可以先把畫面預設分割成 12 等份
- 一般分欄位的寫法
![04-1](https://hackmd.io/_uploads/S1jS4hgNp.png)


```css
    <style>
      .wrap {
        display: flex;
        flex-wrap: wrap;
      }
      .col {
        width: 33.333333%;
        box-sizing: border-box;
        padding: 0 5px;
      }
      .card img {
        width: 100%;
      }
    </style>
```

```css
/* html */
 <body>
    <div class="wrap">
      <div class="col">
        <div class="card">
          <img src="https://fakeimg.pl/300x200/200" alt="" />
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://fakeimg.pl/300x200/200" alt="" />
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://fakeimg.pl/300x200/200" alt="" />
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="https://fakeimg.pl/300x200/200" alt="" />
        </div>
      </div>
    </div>
  </body>
```

- 分成 12 等份，每份是 8.33333
- `[class*="col-"] {}`選取器名稱有任何一字串等於""內的字，就會套用
- 詳細內容請看老師檔案 day08-09.html

```css
[class*="col-"] {
  box-sizing: border-box;
  padding: 0 10px;
}
```

- 選取 class 內含"col-"的東西
使用snippet，可以自己定義
https://snippet-generator.app/

![05](https://hackmd.io/_uploads/Sk4LN3xE6.png)

### 不等寬狀況，使用 row 排
參考老師檔案：day08 > 10.html

### 文圖並排
參考老師檔案：day8 > 11.html
