###### tags: `Bootstrap 5`
# 伸縮自如的 RWD 排版術 筆記

## 1920px講解
1.開版目前大部分會使用1920px做網頁解析寬度，內層再設寬度時盡量不要設定960px、1280px,1440px，內層開版寬度可以參考bootstrap裡建議的寬度。
2. 假設footer是滿版時不需要特別寫寬度(width:1920px or 100%)，會依據外層開版寬度縮放。

## RWD原理(響應式網頁)

### 簡單介紹
如瀏覽網頁時電腦是三欄版型，手機是一欄版型，會自動依不同裝置的解析縮放網頁板型。

<font color="blue">當要寫RWD會在head中加入viewport設定語法。一定要加才算是RWD</font>
> content="width=device-width意思是預設寬度與裝置寬度一樣。
> initial-scale=1.0,.....意思是最大的伸縮比在1倍。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0">

其實原本網頁一開始已有RWD，但在外觀上不太好看。
當假設寫了h1、p標籤後將網頁縮放，網頁會自動更換解析寬度，因為h1、p標籤為區塊元素，通常會自適應父層(body)滿版縮放。

## RWD網站分享
### 要如何讓網站依不同裝置解析寬度去更改樣式?
<font color="blue">這時會用到 CSS midia Queries語法。</font>
如下範例程式碼:如@media裡設定的解析寬度符合條件就會被開啟後執行樣式
解析寬度變成768px以下標題顏色變成藍色

### 這裡要特別說明 **CSS權重**
[110/05/13(四)每日任務](https://hackmd.io/3dorihJ8QZaGseHFWOP_iQ)

---

**權重分類舉例**
HTML標籤 1分
CSS類別選擇器 10分
永遠不要用id 100分 很難被覆蓋樣式，一個網頁只有一個id，用法是錨點。
elemet 1000分 用在輪播或JS上
!importnat 10000分
**先看權重，再看先後順序，後者贏**

---

## **網頁不可以顯示X軸**
> 這裡有一件事要說明，如果做了會被釘在牆上

* 竟然不能出現，那要如何不顯示X軸呢?

可以使用 max-width 屬性，設定最大解析寬度，如用手機、平板閱讀時可以自適應調整寬度，不會顯示出X軸。如要讓網頁置中可使用margin:0 auto。

* 圖片怎麼設定?
建議寫網頁時一定要加入下方的CSS樣式，才不會超出網頁寬度讓網頁又顯示出X軸或變破圖。

img{
    max-width: 100%;
    height: auto;
}


### 區塊寬度判斷
如左邊區塊設定樣式為width:30%，那請問是多少像素?
是30px，因當是設定30%時會對應父層設定的寬度去換算比例。

另外在設定CSS樣式時除了要寫CSS Reset，建議也加入以下樣式

*,*::before,*::after{
    box-sizing: border-box; //對於在計算寬度時有幫助
}

### 開版細節
> 業界潛規則:去客戶那邊時把載具都紀錄起來，給設計稿可以剛好符合。

1. 內層用%設定寬度。
2. 開版建議寬度:375px(414px)(最保險)、768px、1140px(GA可以查看市占率)
3. media寬度要從最大寫到最小。
4. 高度比較少在設定。
5. 切換不同裝置時不要顯示太多可以使用display:none;只需要把最重要內容顯示出來就好。

### 排版Flex
> [自己參考來源](https://wcc723.github.io/css/2017/07/21/css-flex/)
> 版型有很多種做法，都可以做得出來，最後你會找到自己維護的風格

網頁排版(從做到右)


手機排版(從上到下)

從電腦網頁切換到手機時，從大LOGO更換為小LOGO很常見

@media(max-width:768px){
    width: 150px
    height: 150px;
    background:url(../圖片路徑) no repeat;
}

### 斷點規劃
* PC - 1200px
* iPad - 768px
* iPad以下 - 767px
* iPhone 6 Plus - 414px(視專案族群)
* iPhone 6 - 375px(視專案族群)
* iPhone 5、SE - 320px

其中有一個767px的斷點
因為iPad直立時是Android、IOS平板常見大小，在接著767px-320px便視為它們都是手機尺寸，所以767px以下時就會直接把他變成手機版型，畢竟767px~6xxpx相當少見，一開始可以先確保熱門斷點即可。至少可以滿足80%以上的客戶，不用太在意，但如果你想要優化也是OK的。
再來另外一個是320px是你最小需要注意的尺寸，現在仍有許多手機是320px，尤其是小尺寸的iPhone，以前甚至有240px的手機，但現在已經相當稀有了。

## QA
1. 如果要改別人的CODE樣式時，可以怎麼做?
A : 可以設定CSS權重一樣，只改不同樣式，因為權重一樣，就會再依照先後順序去執行樣式，將也不會怕改到別人Code。

# 什麼是桌機版優先(Desktop first)、手機優先(Mobile first)？

在寫版型時從桌機寫到手機還是手機寫到桌機?
其實不一定看習慣，可以多看老師的程式碼。
BootStrap是從手機寫到桌機。