測試響應式HTML

步驟

1. 從起始範本開始或載入範例專案。
2. 編輯 HTML 結構、CSS 樣式和 JavaScript 行為。
3. 按「執行」(Ctrl/Cmd + Enter) 重新整理 sandbox 預覽。
4. 開啟 Console 面板查看 log、warn 和 error。
5. 使用響應式控制項檢查常見寬度下的版面。
6. 格式化、複製或下載為 index.html。

範例

範例 — 執行

HTML

<main class="cards"><article>A</article><article>B</article><article>C</article></main>

CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

JavaScript

console.log("Preview width:", window.innerWidth);

寬度大於600px時顯示三欄，600px及以下顯示一欄。寬度模擬無法取代真實裝置測試。

提示

預覽所需的 HTML、CSS 和 JavaScript 基本執行在瀏覽器中本機完成。

相關工具