Reszponzív HTML alapok
A reszponzív design lehetővé teszi, hogy a weboldalad jól nézzen ki különböző eszközökön, például mobilon, tableten vagy asztali gépen is. Ehhez alkalmazkodó méreteket és elrendezéseket kell használnod.
Viewport meta tag
A viewport meta tag alapja a reszponzív designnak. Enélkül a böngészők gyakran fix szélességű nézetet használnak, ami eltorzíthatja az oldalad mobilon.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Százalékos szélességek
A fix pixel helyett használhatsz százalékos értékeket a szélességekhez. Így az elem a szülőelemhez igazodik, és jobban alkalmazkodik a kijelző méretéhez.
html
<div style="width: 80%;">This box is 80% of its parent</div>Rugalmas képek
Ahhoz, hogy egy kép ne lógjon ki a konténerből, állítsd be a max-width értéket 100%-ra, a height-ot pedig auto-ra. Így a kép mérete automatikusan illeszkedik a rendelkezésre álló helyhez.
html
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Reszponzív elrendezés kialakítása
Használhatsz CSS Flexboxot vagy Gridet, hogy több oszlopot jeleníts meg, amelyek átrendeződnek vagy elmozdulnak mobil nézetben. A flex-wrap segít abban, hogy az elemek ne szoruljanak ki a képernyőről.
html
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1 1 300px;">Left</div>
<div style="flex: 1 1 300px;">Right</div>
</div>Egyszerű teljes reszponzív oldal
Ez a példa egy alap HTML oldalt mutat, amely képes alkalmazkodni a különböző kijelzőkhöz. A képek és konténerek méretei automatikusan igazodnak.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
max-width: 800px;
margin: auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Layout</h1>
<p>This layout adapts to screen size.</p>
<img src="https://via.placeholder.com/600x300" alt="Example">
</div>
</body>
</html>Gyakori hibák
Kerüld a fix méretek használatát (például width="600"), mivel ezek nem alkalmazkodnak a különböző kijelzőkhöz. Ehelyett használj rugalmas beállításokat, például max-width és height: auto.
html
<!-- Bad: fixed size -->
<img src="image.jpg" width="600" height="300">
<!-- Good: responsive -->
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Media query használata
A media query segítségével külön stílusokat adhatsz meg bizonyos képernyőméretekhez. Ez különösen hasznos, ha eltérő megjelenést szeretnél mobilon és asztali gépen.
html
<style>
body {
background-color: white;
}
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
</style>Gyakorlati tanácsok
Kerüld a fix szélességeket, mindig használd a viewport metát, és próbáld ki az oldalad különböző képernyőméreteken. Teszteléshez használhatod a böngésző fejlesztői eszközeit is.
Nyelv kiválasztása
Téma beállítása
© 2025 ReadyTools. Minden jog fenntartva.