Tester une page HTML responsive

Vérifiez les colonnes et les media queries en changeant la largeur de l’aperçu.

HTML CSS JS Compiler · Méthodologie · Contact

Étapes

Partez du modèle de départ ou chargez un projet d'exemple.
Modifiez la structure HTML, les styles CSS et le comportement JavaScript.
Appuyez sur Exécuter (Ctrl/Cmd + Enter) pour actualiser l'aperçu sandbox.
Ouvrez le panneau console pour lire les logs, avertissements et erreurs.
Utilisez les contrôles responsifs pour vérifier la mise en page aux largeurs courantes.
Formatez, copiez ou téléchargez votre travail en index.html.

Exemple

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

Les cartes occupent trois colonnes au-delà de 600px et une colonne jusqu’à 600px. La simulation ne remplace pas un test sur un appareil réel.

Conseil

L'exécution de base de HTML, CSS et JavaScript pour l'aperçu se fait localement dans votre navigateur.