Responsive CSS tutorials - YouTube

Are you writing responsive CSS the wrong way? - YouTube

優先設計 mobile 的樣式！desktop 在後。

即使沒有 css 只有 html , 瀏覽器也會是 responsive 的呈現內容。 一欄式的 layout 就是基本預設，所以要先寫 一欄式的 layout for Mobile，再用 media query 增加 desktop 的樣式。

因爲大家習慣設計稿/ 都先從 desktop 開始，於是切版就跟著這樣做… 要相反才對。

min(), max(), and clamp() are CSS magic! - YouTube clamp 通常用在 font-size 上。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.content {
  width: min(500px, 70%);
}

/* 兩個值，誰比較小就中選。等於以下寫法 */

.content {
  width: 70%;
  max-width: 500px;
}

Turning a design from desktop only to mobile friendly - YouTube

火星溫度資訊面板，之前的過程

• 寫 CSS 過程： Creating a Mars Weather App - HTML & CSS part 2 - YouTube

Inclusively Hidden

文章：Inclusively Hidden | scottohara.me

• meta viewport content=“width=device-width” 這個很重要。
• 這邊是從 desktop 變成 mobile , RWD 的過程。跟 mobile first 的原則是相反的。
• 把原本寫好的 desktop 搬到 media query 裡面，根據 mobile 版的需求調整 media query 外面。

The magic of auto-fit and auto-fill (and the difference between them) - YouTube