建構可在所有裝置上正常運作的回應式網頁版面既複雜又容易出錯。此技能為 Claude 提供行動優先設計原則、流體容器、相對單位和觸控友善互動的明確指導方針，確保您的網頁專案能從行動裝置無縫擴展到桌面端。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「frontend-responsive」。 Create a responsive card component that stacks on mobile and displays side-by-side on desktop
預期結果:
- 行動優先：從小螢幕的堆疊版面開始
- 在桌面端使用 flexbox 或 grid 並排顯示
- 在約 768px 處新增平板及以上的斷點
- 確保按鈕至少有 44px 的觸控目標
- 使用 rem 單位讓間距隨著基礎字體縮放
正在使用「frontend-responsive」。 Make my navigation menu work well on mobile devices
預期結果:
- 在行動裝置上使用漢堡選單模式搭配全寬下拉選單
- 觸控目標最小高度設為 44px
- 考慮使用固定頂部標題以方便在行動裝置上操作
- 在桌面斷點使用 flexbox 製作水平選單
正在使用「frontend-responsive」。 What sizing units should I use for a responsive typography system
預期結果:
- 對字體大小使用 rem 以尊重使用者的瀏覽器設定
- 對小工具內的元件特定間距使用 em
- 對隨視窗寬度縮放的標題使用 vw
- 避免對字體大小使用 px 以支援無障礙偏好設定
安全審計
安全This is a pure documentation skill containing only guidance about frontend responsive design standards. No executable code, network calls, file system access, or command execution capabilities are present. All 58 static findings are false positives triggered by keyword matching on benign documentation text.
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (4)
品質評分
你能建構什麼
建構回應式網頁介面
使用現代 CSS 技術建立能從手機流暢適應到桌面螢幕的版面
實作行動優先設計
將設計稿轉譯為具有適當斷點和觸控友善互動的回應式程式碼
優化跨裝置體驗
確保網頁應用程式在所有視窗大小和裝置類型上提供一致的體驗
試試這些提示
幫我建立一個使用行動優先方法，能在行動裝置、平板和桌面端正常運作的回應式容器。
行動優先的回應式設計應該使用哪些標準斷點？顯示如何在 CSS 中實作它們。
在回應式版面中，何時應該使用 rem、em、px 或 vw/vh？為每個提供實際範例。
如何確保我的按鈕和互動元素在行動裝置上觸控友善？最小尺寸要求是多少？
最佳實務
- 從行動樣式開始，並使用 min-width 媒體查詢逐步增強大型螢幕的呈現
- 對文字排版和間距使用相對單位（rem、em）以支援使用者縮放偏好
- 在實際裝置或可靠的模擬器上測試，而不僅僅是調整瀏覽器大小
避免
- 避免先設計桌面版再簡化為行動版——這通常會導致糟糕的行動體驗
- 不要對容器使用固定的像素寬度——而應使用 max-width 搭配百分比或視窗單位
- 避免在行動版隱藏內容而不提供替代存取方式——考慮內容優先順序策略