# 9/22 CSS3 基礎實作 微軟首頁仿切 - 檢討
###### tags: `CSS3 基礎實作` `2021/09/22` `進度筆記` `前端心得`
---

# 今日講課-上午的部分

# 微軟 - 切版大作業 - 檢討

----

[Microsoft – 雲端、電腦、應用程式和遊戲](https://www.microsoft.com/zh-tw)

在做 RWD 時, 斷點會設蠻多的, padding 要注意一下

---

# 為何網頁有 picture 和 source 的 html 標籤


- 這個跟優化效能有關

> 不同裝置的優化都不太一樣, 效能也不一樣, 通常 PC > 平板 > 手機

- picture 元素

如果小螢幕, 或是手機版的螢幕大小其實不用載這麼大的圖片檔案, 如果降低圖片畫質, 進到手機或平板螢幕, 其實沒有甚麼太大差別, 所以有降低螢幕解析度, 減少圖片容量, 使網頁載入速度提升, 跟 media query 很像


# 參考資料:

[picture: The Picture element - HTML：超文本標記語言 | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/picture)

---

# 輪播區塊 - 示範 PC 版作法

> 這邊開始都跟微軟的 html 不一樣

==用 dev tool 抓不同尺寸的輪播圖==


- 1600 * 900
- 1260 * 472
- 1083 * 609
- 767 * 431
- 539 * 303

正常情況下, 從設計師那邊會拿到手機版的稿, 然後應該不會寫 h1 這種 html 元素給你, 所以我們自己想辦法把手機版的圖片跟文字分開

---

# 在 html 內 讓文字跟圖片拆開


> 一段文字區塊 和一段式圖片區塊

用 background 和切換斷點去實現跟微軟類似的效果


---

## 通常 section 的標題好像都用 h1


---

# 長出結構, 把圖片和文字分離的區塊


---

# 另開一個 carousel 的輪播圖片資料夾


---

# 寫 輪播的 CSS



---

# 統一用 flex 定位

div 預設是 position static, 把文字修改成相對定位

讓 文字也可被定位, 讓圖片和文字依照 html 結構



---

# 調整按鈕位置
> 去除 position absolute


---

# 找出文字間距
- 用以拉抓距離


- 離左邊有點距離


- 讓 p 有固定寬, 可以換行


---

# 可以先保留自己的作法, 老師先示範怎麼做 RWD

- 範例放在 google drive 上

---

# 輪播區塊 - 示範 cell phone 版作法

微軟的 vw 小到一定程度後, height 才會改有會有等比例縮放, 照著做的時候會有點爆版

> 要調整的話可以改高度和寬度


---

# 用 CSS 的方式, 當他寬變 1260px 時換圖

- 比例很接近 1600px


不過換成 1260 的時候, 圖片檔案容量大小有變小, 這樣讀取速度有增快, 有優化到

不過如果用 CSS 控制去做, 會換很多的斷點, 可以用 picture 去做

---

# 接著 1083px 的時候有個斷點

- container 會變大, 高度也變了, 變成滿版


---

## 當寬的尺寸是 1083 的時候, 要把 max-width 改變


## 記得高也有變, 609px

- 比例在 1083 * 609 的時候要滿版

> 高度也要改, 別忘記 height 的 vw 比例 = 609/1083= 0.5623


---

# 標題 和 p 也有斷點
h 的 px 也有改變
p 要變 330px 左右


> @media 也有權重, 記得後寫的要多注意


---

# 767 px 的時候有個斷點

- 版型整個大變化了

讓 position 回歸排版系統


變成兩塊, 文字和圖片分開

## 記得高度改了, 圖片也要有自己的高



- height 是 100%


---

# unset

- 也可以讓 height 回歸正常


---

# 更改文字標題和敘述高度和顏色

- 767px 的時候背景會換顏色


- 文字也會更改


- 間距也更改


# 圖片要換成 767px 的圖片


# 微調

- 文字更改


間距和 敘述 p 的大小


---

# 記得有手機的 539 px 大小

# 也可以用 picture 的 html 元素去做效能優化的部分

---

# 下午部分 - 檢討四個欄位作法


- 可以用 flex, gap, padding 來做

---

# 參考微軟的作法, 左右 padding

- 每個 col 的左右都是 12px padding

---

# 四個欄位 的 html 結構


- row 裡面總共有四份 col


跟 Twitch 仿切的時候很相像

---

# 幫 4 個欄位加上 CSS 樣式 - padding 版本


> 加上 flex


- 和用 margin 去推

---

# 幫 4 個欄位加上 CSS 樣式 - 版本

四欄式的排版, 每個間距是 24px, 總間距是 72 px, 因此我們用扣的


## 用 space between 去推



---

# 現代 4 欄式, 在網頁中很常見


---

# 做四欄式 的 RWD

- 把不同尺寸的圖片塞進去


## 然後這次用 img 去塞圖片


---

# 如果圖片尺寸不符合怎辦??

- 把圖片請設計師出一張跟設計稿完全吻合的圖片

- 自己用 CSS 強制挖圖放大


## 可以發現 business pic 被 img 撐大


## 這樣會一路跟著 col 走


這是用 img 去做的好處, 因為他有容器包著, 可以不用去算長寬比, 因為父元件去帶長寬比

==微軟首頁也是這樣做的==

- 會算長寬比的場合, 可能沒有東西包著

---

# 去調整間距



- 盡量對齊就好

# 用 padding 寫的好處 - 可以直接用 比例 去更改

## 如果是 三欄式


## 如果是 六欄式


---

# html 的 img src 和 css 的 background-image 的使用時機

- background-image

==常用在大區塊上==

> 例如有些時候會讓文字置於文字之後, 有容器去包著文字


> 或是電商的一些商品圖片上有壓一些 logo 的東西, 可以用背景圖片去做

> 如果你的圖片失去連結, 或是 CRUD 請求的動作沒有完成, 可以用 img src alt 去顯示替代文字


- 如果是這種單個單個的圖片, 比較沒有文繞圖的情況



- 但也不是不行用 background-image

# 參考資料:

[何時使用IMG與CSS背景圖像？ | 程式設計討論 | adabai.com](http://www.adabai.com/questions/a12131561345295.html)

---

# 記得寫作業檢核表, 跟上進度, 比較能學到新課程