Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Responsivní hlavička</title> <h1>Responsivní hlavička</h1> <p>Obrázky se mění podle šířky viewportu.</p> <div class="hlavicka"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.hlavicka { background: url(/i/1600x400); background-size: 100%; height: 0; padding-bottom: 25%; } @media (max-width: 60em) { .hlavicka { background-image: url(/i/800x200); } } @media (max-width: 30em) { .hlavicka { background-image: url(/i/400x100); } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>