多螢幕時代（筆電、平板、手機、智慧 TV），單一固定寬度網頁已無法滿足需求。響應式設計（RWD）透過流體網格、彈性圖片、媒體查詢，實現「一碼多端」。繼前文案例分享後，本文精選 20 款涵蓋網格系統、字體縮放、測試、圖片適配、導航轉換等領域的實戰工具，助你高效構建彈性佈局。

流體網格系統

• Golden Grid System：摺疊式網格，含欄位、跨頁、基線、腳本四大特性。
• Fluid 960 Grid System：經典 960.gs 的流體版，繼承 MooTools/jQuery 生態。
• 1140 CSS Grid：完美適配 1280 螢幕，小尺寸自動轉流體，內建 Media Queries 支援行動裝置。
• Columnal：混合標準與自定代碼，1140px 基準，流體設計兼容多數瀏覽器。
• BluCSS：輕量、易記的 CSS 框架，減少專案啟動配置成本。

字體與排版精準控制

• Lettering.js：jQuery 字體控制外掛，支援字距微調、創意排版、代碼模組化管理。
• FitText：標題文字自動縮放，確保大標題在不同寬度下主次分明、不換行溢出。
• PX to EM：像素轉 EM 單位計算器，快速換算相對單位，落實彈性排版。

圖片與媒體自適應

• Fluid Images：收錄彈性圖片技術文檔與範例代碼。
• Adaptive Images：伺服器端偵測裝置，自動生成/快取/傳遞最適尺寸圖片，無需修改前端標記。
• Seamless Responsive Photo Grid：無縫圖片網格佈局，適合大量圖片展示。

導航與介面元件適配

• Convert a Menu to a Dropdown：窄螢幕自動將水平導航轉為下拉選單，節省空間。
• Responsive Table：資料表格在小螢幕下的重組顯示方案（如堆疊、橫向滾動、欄位隱藏）。

測試與除錯利器

• Responsive Design Testing：輸入網址即時預覽各尺寸斷點效果。
• resizeMyBrowser：一鍵調整瀏覽器視窗至主流裝置尺寸或自訂尺寸，支援批次測試。

進階框架與行動化方案

• Skeleton：極輕量 CSS/JS 集合，快速構建從 17 吋筆電到 iPhone 均優雅的頁面。
• Gridless：Mobile First、HTML5/CSS3 優先、跨瀏覽器字體優化的現代起手專案模板。
• Adapt.js：僅 826 bytes JS，根據螢幕寬度動態載入對應 CSS，避免載入多餘樣式。
• Mobilize.js：HTML5/JS 框架，自動將現有網站轉為行動版，支援 iOS/Android/Blackberry/Opera Mini 等。

總結

工具是加速器，核心在於「Mobile First」思維與「內容優先」策略。根據專案複雜度選擇輕量庫或完整框架，善用測試工具驗證斷點，方能在裝置碎片化浪潮中穩健交付。