Testare HTML responsive

Verifica colonne e media query cambiando la larghezza dell’anteprima.

HTML CSS JS Compiler · Metodologia · Contatti

Passaggi

Parti dal template iniziale o carica un progetto di esempio.
Modifica la struttura HTML, gli stili CSS e il comportamento JavaScript.
Premi Esegui (Ctrl/Cmd + Enter) per aggiornare l'anteprima sandbox.
Apri il pannello console per leggere log, avvisi ed errori.
Usa i controlli responsive per verificare il layout a larghezze comuni.
Formatta, copia o scarica il tuo lavoro come index.html.

Esempio

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

Le schede usano tre colonne sopra 600px e una colonna fino a 600px. La simulazione non sostituisce i test su dispositivi reali.

Suggerimento

L'esecuzione base di HTML, CSS e JavaScript per l'anteprima avviene localmente nel tuo browser.