https://benzhub.github.io/tags/%E9%9F%BF%E6%87%89%E5%BC%8F/Recent content in 響應式 on BenzHubHugozh-TWMon, 24 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/024-responsive-design/Mon, 24 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/024-responsive-design/<blockquote> <p>前面 23 篇我們把單一畫面「排得整齊、看得漂亮、用起來順手」,但真實世界的網頁必須同時面對手機、平板、桌機三種天差地遠的螢幕。這一篇 <strong>TailwindCSS</strong> 的響應式設計(Responsive Design),要用 <code>sm:</code>、<code>md:</code>、<code>lg:</code>、<code>xl:</code>、<code>2xl:</code> 這組斷點(breakpoint)前綴,加上 <strong>mobile-first</strong>(行動優先)哲學、v4 內建的 max-* 區間變體、任意斷點 <code>min-[...]</code>,以及依「容器寬度」而非視窗寬度響應的容器查詢(container query)<code>@container</code>,讓<strong>同一份程式碼,在所有螢幕上都呈現最佳樣貌</strong>。</p> </blockquote>