Testowanie responsywnego HTML

Zmieniaj szerokość podglądu, aby sprawdzić kolumny i zapytania medialne.

HTML CSS JS Compiler · Metodologia · Kontakt

Kroki

Zacznij od szablonu startowego lub załaduj przykładowy projekt.
Edytuj strukturę HTML, style CSS i zachowanie JavaScript.
Naciśnij Uruchom (Ctrl/Cmd + Enter), aby odświeżyć podgląd w sandbox.
Otwórz panel Console, aby czytać log, warn i error.
Użyj kontrolek responsywnych, aby sprawdzić układ przy typowych szerokościach.
Formatuj, kopiuj lub pobierz pracę jako index.html.

Przykład

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

Powyżej 600px karty mają trzy kolumny, do 600px jedną. Symulacja szerokości nie zastępuje testów na prawdziwych urządzeniach.

Wskazówka

Podstawowe wykonywanie HTML, CSS i JavaScript dla podglądu odbywa się lokalnie w przeglądarce.