iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

我這裡有本切版秘笈,我看與你有緣,就免費送給你了。 系列

希望在未來的三十天中,
我能將我這幾年自己打磨出來的「等比縮放切版工作流」,
完完整整的讓讀文章的你學會,
未來的切版工作就交給你了,
切版真的好累啊 Q_Q。

參賽天數 4 天 | 共 4 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

用等比縮放達到我心中的 pixel perfect

這是一張很常見、令人苦惱的設計稿,核心內容直接塞滿了整張設計稿,當你的視窗寬度小於 (1440 - 50 * 2)px 時,內容就會貼齊視窗邊緣,並且此時離手...

2025-09-15 ‧ 由 jzovvo 分享
DAY 2

等比縮放的主角登場:解鎖 vw 的縮放魔法

通常大家剛接觸前端時,最先接觸的 css unit 都是 px,但 px 作為一個絕對單位,在不同尺寸的瀏覽器視窗中所呈現的大小都是固定的,也因此催生了超多響應...

2025-09-16 ‧ 由 jzovvo 分享
DAY 3

等比縮放的詠唱咒語:設計稿上的值 / 設計稿寬度 * 100vw

上一篇我們學會了 vw 的運算邏輯,先複習一下: vw 為視窗寬度的百分比,1vw 為視窗寬度的 1%,在視窗寬度為 100px 時,1vw 的計算結果為 1...

2025-09-17 ‧ 由 jzovvo 分享
DAY 4

將咒語刻印在網頁上:CSS calc()

calc 介紹 以前 CSS 要進行不同單位間的動態運算(例如 10px + 50%)非常困難,通常需要依賴 js 處理。 在這樣的背景下,CSS 的 calc...

2025-09-18 ‧ 由 jzovvo 分享