CSS 鬼故事
年末的時候活動總是特別多，最近在處理公司的活動網頁時遇到一個挺鬼的問題，問題在於某個網頁區塊會被莫名的加上 style="display: none !important; min-height: 0px !important; height: 0px !important;"
網頁設計三兩事
透過 Vite 客製化 Bootstrap：打造你的專屬樣式
Bootstrap 是廣泛應用的前端樣式框架。一般情況下，我們可以直接使用它提供的所有功能。然而，在某些特殊專案中，你可能只需要 Bootstrap 的部分功能，例如，只需要它的自適應網格。那麼，如何根據需求自訂 Bootstrap 呢？
透過 Vite 客製化 Bootstrap：打造你的專屬樣式 Read More »
CSS 容器查詢單位 cqi
其實 cqi 的使用方式有點類似 rem 與 em 的關係。
當我們設定了 rem，就可以知道一個 em 實際是多少；當網頁需要調整整體比例時，只需要改動 rem 的值，就能讓所有使用 em 的元素跟著連動變化，維持一致的比例。也就是說，你可以簡單地將 cqi 理解成「容器內的 root 單位」
比女朋友還善變的 clamp()
在處理自適應網頁的設計中，常常會遇到類似的畫面需求，我們希望字體的大小可以隨著螢幕尺寸自動變換，以滿足用戶在不同設備的閱讀體驗。遇到這種情況我們通常會使用到 vw（viewport width，可視區佔比）的單位，讓字體大小可以隨著視窗寬度變化。
如何透過一個 QR Code 搞定多平台下載？
在遊戲產業中，特別是手遊，為了盡可能觸及到更多的玩家，開發商通常會同時推出符合 iOS 和 Android 這兩大主流平台的應用。並將遊戲上架到對應的 Apply Store 和 Google Play 應用商店，方便玩家在自己熟悉的平台裡快速下載。然而，這裡有一個常見的問題...
如何透過一個 QR Code 搞定多平台下載？ Read More »
HTML 的 role 屬性是什麼意思?
由於 HTML 本身的限制，有時 HTML 的標籤無法充份表示該元素的用途，比較常見的情況我們會將 a 標籤模擬成按鈕的樣式，在一般的情況下這沒什麼問題。但遇到需要更嚴謹的語意應用時(如無障礙網頁)，我們就需要用特別的方式來區分，這時我們會藉由 role 來輔助說明該元素的用途，增強語義。
HTML 的 role 屬性是什麼意思? Read More »
網頁要如何實現平面刊物多欄或跨欄的效果？
對於平面設計師來說，多欄或跨欄排版的應用非常普遍，像是報紙、雜誌、廣告 DM 等等，幾乎我們生活中看到的各種平面設計都會出現它的蹤跡。特別是遇到大量的文字內容，透過欄位的編排，除了增加閱讀趣味外，好的編排還可以讓內容更加容易閱讀，幫助理解，一舉多得。
網頁要如何實現平面刊物多欄或跨欄的效果？ Read More »
CSS 寫入模式 writing-mode
一直覺的 CSS 是種很有生命力的語言，總能三不五時挖掘出新的功能，豐富我們對 Web 的想像力。
最近到 W3School 查詢標籤的用法，意外看到 writing-mode，有種相見恨晚的感覺。對網頁設計師來說，畫面的安排無非由點、線、面依次推導，內容因為文化的關係會有不同的表現方式。
CSS 寫入模式 writing-mode Read More »
