透過 Vite 客製化 Bootstrap：打造你的專屬樣式
Bootstrap 是廣泛應用的前端樣式框架。一般情況下，我們可以直接使用它提供的所有功能。然而，在某些特殊專案中，你可能只需要 Bootstrap 的部分功能，例如，只需要它的自適應網格。那麼，如何根據需求自訂 Bootstrap 呢？
透過 Vite 客製化 Bootstrap：打造你的專屬樣式 Read More »
RWD
比女朋友還善變的 clamp()
在處理自適應網頁的設計中，常常會遇到類似的畫面需求，我們希望字體的大小可以隨著螢幕尺寸自動變換，以滿足用戶在不同設備的閱讀體驗。遇到這種情況我們通常會使用到 vw（viewport width，可視區佔比）的單位，讓字體大小可以隨著視窗寬度變化。
如何讓 Google Map 支援 RWD 的效果
我們在製作一些與行程或地點有關的網頁時，有時候會希望附上相關的地圖，好方便使用者了解附近的地理位置及規劃路線，這類的地圖應用以 Google Map 最常見，但 Google Map 內嵌到網頁的方式是使用 iframe，對一般的網頁也許不受影響，但如果遇到 RWD 的網頁時，就會發現 Google Map 提供的 iframe 並不會隨著設備的不同而去調整適當的比例，這時，你可以試試下面的方式。
如何讓 Google Map 支援 RWD 的效果 Read More »
如何製作 RWD 響應式的影片？
有時客戶會希望在網頁中插入一段 Youtube 影片讓畫面更活潑點，如果是一般的網頁，你只需要直接將 Youtube 的給你的 Code 嵌在網頁裡即可。但如果你正在做 RWD 的網頁，你會發現直接使用 Youtube 給你的 Code 版面會無法隨視窗大小進行縮放，這是因為 Youtube 給你的 Code 使用的單位都是 px 的絕對單位，加上影片有長寬比的問題。常見的有 4:3 及 16:9，使用錯誤的比例會造成變形。如果你將絕對單位改成百分比。比如將影片寬設成 100%，高度設成 auto。這個想法沒有錯，但實作後你會發現影片的高度不會隨寬度自動等比例縮放，造成長、寬比例錯誤而導致影片變形，因此我們需要一點小技巧，讓影片可以配合響應式網頁的縮放需要。