Responsive HTML testen

Prüfen Sie Spalten und Media Queries bei verschiedenen Vorschau-Breiten.

HTML CSS JS Compiler · Methodik · Kontakt

Schritte

Starten Sie mit der Vorlage oder laden Sie ein Beispielprojekt.
Bearbeiten Sie HTML-Struktur, CSS-Styles und JavaScript-Verhalten.
Drücken Sie Ausführen (Ctrl/Cmd + Enter), um die Sandbox-Vorschau zu aktualisieren.
Öffnen Sie das Console-Panel für Logs, Warnungen und Fehler.
Nutzen Sie die Responsive-Steuerung für gängige Layoutbreiten.
Formatieren, kopieren oder laden Sie Ihre Arbeit als index.html herunter.

Beispiel

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);

Über 600px erscheinen drei Spalten, bis 600px eine Spalte. Die Breitenvorschau ersetzt keine Tests auf echten Geräten.

Tipp

Die grundlegende Ausführung von HTML, CSS und JavaScript für die Vorschau erfolgt lokal in Ihrem Browser.