文章目錄
Day12 | Getting fancy with navigations
實作 Flexbox Challenge #4
Day13,14 |
min(), max(), and clamp()
min(), max(), and clamp() are CSS magic! - YouTube
clamp(最小值, 理想, 最大)
通常 clamp 不設定最小值（行動裝置）
[[Kevin Powell_conquering-responsive-layouts Day1~10#Day 4 vh vw vmin vmax]]
clamp 實用情況：放在大字體。
Day 15 | Intro to media queries
Day 16 | What breakpoints to use?
How do decide what breakpoints to use?
- The tl;dr of the article: Use 600px, 900px, 1200px, and 1800px if you plan on giving the giant-monitor people something special. The 100% correct way to do CSS breakpoints
Day 17 | The viewport meta tag
head 一定要加只個才有 RWD
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Day 18 | Flexbox Challenge 4 solution
Writing mobile-first CSS
CSS Variables - An introduction to CSS custom properties - YouTube
html 架構是 desktop 的，先從 mobile 角度寫 css
在 day12 Flexbox Challenge #4 教學，步驟如下：
- 看設計圖先切 desktop 版本 ：包含 html 跟 css。（可以看到 desktop 版本畫面）
- 再切 mobile 版本保留 html ，重寫 css ，從 mobile 版面來寫 css。（可以看到 mobile 版本畫面）
- 使用 media query ，把 step1 寫的 css 逐漸填入 media query 中；補齊兩個版本。
所以流程是？
- 原則： mobile first
- html 必須是 desktop 架構
做法一（教學做法）：
- 先切 desktop 版本 （html / css）
- 砍掉 css ，重寫 css mobile 版本
- 使用 media query 補齊 desktop；（過程多爲複製貼上）。
做法二 （高手做法）：html / css 一起進行
- 一定要看真實專案怎麽做啦！ Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar - YouTube
A look at min-height
Day 21 | recap
- websites are responsive before we wirte any CSS.
- writing mobile-first CSS tends to be the easier way to approach it as well, even if you only have a desktop layout to base things off of.
- Grid 沒有包含在此課程（實戰中我覺得不常用到）
next
-
用真實專案去練習切版 Frontend Mentor | Front-end coding challenges using a real-life workflow
-
RWD 必看這這個手把手影片清單，看看專業的切版！（切版就是經驗跟管理） Build a website from scratch - Frontend Mentor EasyBank landing page - YouTube
youtuber
- Weibenfalk - YouTube High quality JS and React content
- James Q Quick - HTML, CSS, JS and more
- Flavio - Good quality JS content
- Colt Steele - HTML, CSS, JS