鐵人檔案
希望在未來的三十天中，
我能將我這幾年自己打磨出來的「等比縮放切版工作流」，
完完整整的讓讀文章的你學會，
未來的切版工作就交給你了，
切版真的好累啊 Q_Q。
這是一張很常見、令人苦惱的設計稿，核心內容直接塞滿了整張設計稿，當你的視窗寬度小於 (1440 - 50 * 2)px 時，內容就會貼齊視窗邊緣，並且此時離手...
通常大家剛接觸前端時，最先接觸的 css unit 都是 px，但 px 作為一個絕對單位，在不同尺寸的瀏覽器視窗中所呈現的大小都是固定的，也因此催生了超多響應...
上一篇我們學會了 vw 的運算邏輯，先複習一下： vw 為視窗寬度的百分比，1vw 為視窗寬度的 1%，在視窗寬度為 100px 時，1vw 的計算結果為 1...
calc 介紹 以前 CSS 要進行不同單位間的動態運算（例如 10px + 50%）非常困難，通常需要依賴 js 處理。 在這樣的背景下，CSS 的 calc...
在「等比縮放的詠唱咒語：設計稿上的值 / 設計稿寬度 * 100vw」與「將咒語刻印在網頁上：CSS calc()」兩篇中，我們推導出了一個重要的公式，希望大家...
在開始前，我想先說一些話：如果你是剛接觸前端的新手，那我真的很抱歉，我真的無法在短短的幾天讓你變成切版高手，還是需要你去稍微認識一下常用的 CSS 屬性效果是什...
各個瀏覽器對於標籤的預設 CSS 屬性都有所不同，前端工程師為了儘量確保自己的作品在所有瀏覽器中顯示一致，都會把這些標籤屬性儘量重置，但每個人習慣的做法不同，這...
我們在「實戰1」中將設計稿等比縮放實現後，會發現網站在大螢幕看起來會超爆大。 要解決這個問題，我們需要在 vw 數值達到某些條件時，限制其大小，而前面介紹的 c...
我們完成「實戰1」後會發現：在大螢幕上顯示網站會變得很大。 原因在於當視窗寬度大於設計稿寬度後，vw 數值還是會隨視窗寬度增加而持續無限制的往上漲，導致越大的...
我們在「為縮放魔法設置疆界」中展示了等比縮放產生的畫面過大問題，並學會如何限制 vw 的數值成長。 如果想避免 vw 數值無限制的放大或縮小，可以使用 max(...
