programming

conquering-responsive-layouts Day1~10

RWD 的重要原則

Conquering Responsive Layouts

Day 1 | Using percentages & avoiding heights

Percentages vs Fixed widths

  • width 使用百分比而不是 px

Percentages on the child

  • width 使用百分比而不要用 px
  • 子階層的百分比，是根據上一層的父階層。

Why it’s a good idea to avoid heights

  • 單位盡量避免使用 px, 而是使用 em/rem

Day 2 | Getting familiar with relative units

em / rem 的原理：

CSS em and rem explained #CSS #responsive - YouTube A look at some CSS units

em

  • 如果父階層沒有設定 font-size，子階層的 1em 瀏覽器預設是 16px
  • font-size 的 em 是根據 最近一個父階層 的 font-size 爲基準。
  • 其他屬性（width, margin …）的 em 是根據 同個選擇器 的 font-size 的 em 做變化的。 這是要注意的地方。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


.col--em {
  font-size: 20px;
}

.col--em h1 {
/* 20px * 2.5 = 50px */
font-size: 2.5em;

/* 是根據 2.5em 爲基準，所以是 50px * 1 = 50px */
margin-bottom: 1em;
}

rem

font-size 的 rem (root em) 根據 <html> element 的 font-size 做變化的。其他屬性（width, margin …）也是相同原理。

請正確使用 em / rem（重點）

^488518

Why you shouldn’t set font-sizes using em - YouTube

For font-sizes, always use rem to avoid compounding problem.

rem are useful when we are trying to use media queries

在不同的 media 設定適合的 html { font-size: xxx } ，卡蹦！全部字體都會跟著改變！

Use em for properties other than fontSize like margin, padding, width etc…

Day 3 | Enter max-width

單純加上 max-width 而已

Day 4 | vh, vw, vmin, vmax

CSS Units: vh, vw, vmin, vmax #css #responsive #design - YouTube

這些單位都是根據設備的長寬，% 根據上一層。

  • 頂多用在字體很大的 Title 的 font-size ，而且要反覆測試因爲很多狀況。（不實用）
  • vmin, vmax 使用的狀況又更少了

Review of the first week

In this first week, we’ve looked at:

  • Using percentages for widths
  • Avoiding to set heights
  • Using max-width

Day8 | Flexbox basics

An introduction to flexbox

Day9 | a deeper dive into Flexbox

Adding a hero image （align-self）

  • flexbox , 會把每個 item （子元素）的高度變成一樣。所以 左邊文字，右邊圖片的 layout。 右邊圖片高度會取決於左邊文字佔的高度。
  • 使用 align-self 屬性，把這個預設的特性取消掉。
1
2
3
4


.hero__image {
	align-self: flex-start;
}

Column widths and flexbox justify-content

  • flexbox 子元素分配 width （%）之後，如果各個子元素寬度加總沒有超過 100 %；可以使用 justify-content 屬性分配子元素之間的間距。

Ensuring the image is responsive

  • 記得加上
1
2
3
4


img {
	width: 100%;
}

因爲 img 外層可能會包一層，這樣可以確保 RWD

發現的技巧：很多 layout 如果不好達成，試着在外面再包裹一層，然後使用/不使用 width 屬性。

Day10 | A deeper dive into flexbox

清單 Flexbox basics - YouTube

[Flexbox Tutorial - Flexbox containers - YouTube]

(https://www.youtube.com/watch?v=hwbqquXww-U&list=PL4-IK0AVhVjMSb9c06AjRlTpvxL3otpUd&index=1&t=6s) 4:05 Flex Direction

flex-wrap item 數量太多，都已經擠到最小還無法排在特定寬度內

5:24

  • nowrap item 超出 container
  • wrap 排不下的 item 往下面一列

重要觀念：item 通常不設定寬度( width )，因爲 container 決定 item 的優先權會大於 item 本身自己的設定。item 設定寬度只會造成混亂而已。

flex-flow = flex-direction+flex-wrap

7:50

justify-content

9:33 根據 主軸（flex-direction）的方向依序排列

align-items works as cross axis (if you are column then it row)

11:09 決定 item 副軸的延伸程度/ 放在副軸的位置（前中後）。（defaults is “strech”）

item 如何置中，萬年題目

1
2
3
4
5


.container {
	justify-content: center;
	align-items: center
}

align-items: baseline align text same level

13:06

align-contents align all content in flex

15:58 決定 item 副軸的延伸程度。 有多個 item， 且有 wrap 成許多行，才有效果。 不是很直覺。

[Flexbox Tutorial - Flexbox Items - YouTube]

(https://www.youtube.com/watch?v=4Oi5xpjoCRk&list=PL4-IK0AVhVjMSb9c06AjRlTpvxL3otpUd&index=2)

flex-grow item 數量還不夠填滿 container 寬度，而拉長 item 的行爲

  • default is 0。不會拉長填滿，內容有多少就佔多少。 1:48

flex-shrink container 寬度不足，而壓縮 item 的行爲

default is 1 2:20

flex-basis

describe how much space it want to take 2:25

  • 指定一個想要的，預設的寬度( px ; % )，如果情況不允許，就會依照 flex-grow flex-shrink 的邏輯。
  • 邏輯類似設定 width 屬性，搭配 container 設定更是方便設定 前中後位置！很實用。

3:47 flex-grow: 1 grow to fill space (even if you fixed size) 5:06 flex-shrink shrinking faster

flex: grow shrink basis

6:28

align-self

8:35 align only it self