Duyarlı HTML testi

Önizleme genişliğini değiştirerek sütunları ve medya sorgularını kontrol edin.

HTML CSS JS Compiler · Metodoloji · İletişim

Adımlar

Başlangıç şablonundan başlayın veya bir örnek proje yükleyin.
HTML yapısını, CSS stillerini ve JavaScript davranışını düzenleyin.
Sandbox önizlemesini yenilemek için Çalıştır'a (Ctrl/Cmd + Enter) basın.
Log, uyarı ve hataları okumak için Console panelini açın.
Yaygın genişliklerde düzeni kontrol etmek için duyarlı kontrolleri kullanın.
Çalışmanızı biçimlendirin, kopyalayın veya index.html olarak indirin.

Örnek

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 üzerinde üç sütun, 600px ve altında tek sütun görünür. Genişlik simülasyonu gerçek cihaz testlerinin yerini tutmaz.

İpucu

Önizleme için HTML, CSS ve JavaScript'in temel yürütmesi tarayıcınızda yerel olarak gerçekleşir.