本篇作為筆記用途,記錄 CSS 參考資料

SASS

  • 命名變數及賦值 $variable-name: 100px;
  • 使用 calc 計算變數 calc(100vh - #{$body-height})

單位

在設計自適應性網頁(RWD)時我們會希望我們的圖片隨著螢幕的大小而改變,這時候我們就可以利用到這兩個新的單位。

  • px 螢幕使用像素(要考慮 Retina 螢幕像素是一般螢幕像素的兩倍)
  • % 相對父層的大小比例
  • vh 代表的是 view height,也就是螢幕可視範圍高度的百分比
  • vw 表示的是 view width,也就是螢幕可是範圍寬度的百分比
  • vmin vh、vw 取最小值
  • vmax vh、vw 取最大值(但是目前 IE 跟 Safari 不支援)

CSS3 選擇器

群組選擇器(Group of selectors)
E, F E 和 F 元素 群組選擇器
組合選擇器(Combinator selectors)
E F E 父元素內部所包含的所有後裔 F 子元素 後代組合器
E > F E 父元素所包含的直接第一層 F 子元素 子組合器
E + F E 兄元素之後相鄰的第一個 F 弟元素 相鄰兄弟組合器
E ~ F E 兄元素之後的所有 F 弟元素 一般兄弟組合器

字型

建議

  • CSS 子組合選擇器(E > F)盡量少用,甚至禁用 _ 因為這會讓 CSS 失去彈性 _ 也代表 HTML 的嵌套過多 * 此寫法也可能在 Angular 中造成 CSS 樣式無法如預期中運作(常見於使用結構指令時)

參考資料:


Poy Chang

Trial and Error