测试响应式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 基本执行在浏览器中本地完成。

相关工具