iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

掌握 Master CSS 優化開發體驗 系列

Master CSS 是由台灣團隊開發的「一種具增強語法的虛擬 CSS 語言」。
僅需透過 HTML 便可高校建構你的用戶介面和設計系統。

與 Tailwind CSS 相比之下,學習 Master CSS 更加容易,因為你只需要熟悉其結構化的語法 ( 它與原生 CSS 語法很像 ) 及不同屬性所預設的單位差異,就能夠快速地上手。

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 - 在元素上應用響應式斷點

響應式網頁設計 響應式網頁設計(Responsive Web Design)已經是網頁開發必備的一項技術,其原理是根據使用者的裝置、視窗寬度自適應網頁佈局。 它...

2022-09-24 ‧ 由 秘密基地 分享
DAY 12

Day 12 - 在元素上應用媒體查詢

CSS 媒體查詢的應用非常地廣泛,昨天的單元 「Day11 - 在元素上應用響應式斷點」,就是使用媒體查詢的一種形式,Master CSS 提供了一系列媒體查詢...

2022-09-25 ‧ 由 秘密基地 分享
DAY 13

Day 13 - 在元素上應用群組功能

群組功能 群組功能是 Master CSS 中非常實用的一種語法糖,可以幫助我們將 "具有相同後綴" 的選取器、媒體查詢等樣式進行分組,從而...

2022-09-26 ‧ 由 秘密基地 分享
DAY 14

Day 14 - 在元素上應用深色模式

深色模式 深色模式在網頁上的應用已經越來越廣泛,使用者能夠依據自身的偏好來切換,它的好處包含以下幾點: 對光線敏感的用戶能夠更清楚地閱讀。 低光環境下也能舒適...

2022-09-27 ‧ 由 秘密基地 分享
DAY 15

Day 15 - 動態賦值

動態賦值 有時候我們需要透過程式去動態賦予元素樣式,下方程式碼以 Vue.js 為例,input 使用 v-model 綁定資料 size,當 range 拖動...

2022-09-28 ‧ 由 秘密基地 分享
DAY 16

Day 16 - 自定義類名

避免過早抽象化 在 「Day 02 - 避免過早抽象化」 這個單元裡,有介紹到應該盡量避免過早幫元素抽象化命名,因為會導致我們在 "不確定的狀況下&q...

2022-09-29 ‧ 由 秘密基地 分享
DAY 17

Day 17 - 自定義顏色

預設顏色 雖然 Master CSS 官方有提供許多預設的顏色,但大部分開發者都需要依照設計而有自定義顏色的需求。 自定義顏色 在昨天的「Day 16 - 自...

2022-09-30 ‧ 由 秘密基地 分享
DAY 18

Day 18 - 自定義響應式斷點

預設斷點 在「Day 11 - 在元素上應用響應式斷點」這個單元裡,有介紹到 Master CSS 響應式斷點的使用方法,並且官方有提供多達十組的預設斷點。...

2022-10-01 ‧ 由 秘密基地 分享
DAY 19

Day 19 - 自定義媒體查詢

在「Day 12 - 在元素上應用媒體查詢」這個單元裡,有介紹到 Master CSS 提供了一系列媒體查詢的語法,例如響應式斷點 @斷點、列印模式 @prin...

2022-10-02 ‧ 由 秘密基地 分享
DAY 20

Day 20 - 自定義配色方案

配色方案 在「Day 14 - 在元素上應用深色模式」這個單元裡,有介紹到 Master CSS 預設提供兩種配色方案,分別為淺色模式及深色模式,讓我們來複習一...

2022-10-03 ‧ 由 秘密基地 分享