# 16. Reszponzív design és media queries

2025. november 23. • 20 perc olvasás • CSS3 haladó

A reszponzív webdesign biztosítja, hogy a weboldal minden eszközön - asztali gépen, tableten és mobilon - jól jelenjen meg és használható legyen. Ebben a cikkben megtanulod a media queries használatát és a mobilbarát technikákat.

#### Érettségi információ

Ez a lecke BÓNUSZ anyag!

A reszponzív design és media queries NEM része az érettségi követelményeknek. Ez a lecke hasznos kiegészítő tudás a modern webfejlesztéshez, de a vizsgán nem kérdezik.

## Mi a reszponzív design? BÓNUSZ

A reszponzív webdesign olyan megközelítés, ahol a weboldal automatikusan alkalmazkodik a különböző képernyőméretekhez és eszközökhöz.

#### A reszponzív design három pillére

- Rugalmas grid: Százalékos szélességek fix pixelek helyett
- Flexibilis képek: Képek skálázódnak a konténerhez
- Media queries: CSS szabályok eszközméret alapján

## Viewport meta tag BÓNUSZ

A reszponzív design alapja a viewport meta tag a HTML `<head>` részében:

HTML - Viewport meta tag
`<!-- Kötelező minden reszponzív oldalon --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Teljes szintaxis --> <meta name="viewport" content=" width=device-width, /* Szélesség = eszköz szélessége */ initial-scale=1, /* Kezdeti zoom: 100% */ minimum-scale=1, /* Min zoom (opcionális) */ maximum-scale=5, /* Max zoom (opcionális) */ user-scalable=yes /* Zoom engedélyezve (ajánlott!) */ ">`

#### Akadálymentesség: Ne tiltsd le a zoomot!

- `user-scalable=no` és `maximum-scale=1` kerülendő
- Gyengénlátó felhasználóknak szükségük lehet a nagyításra
- Sok mobil böngésző figyelmen kívül hagyja ezeket az értékeket

## Media queries alapok BÓNUSZ

A `@media` szabállyal feltételesen alkalmazhatunk CSS-t a képernyő mérete, típusa vagy egyéb jellemzői alapján.

CSS - Media query szintaxis
`/* Alapszintaxis */ @media típus and (feltétel) { /* CSS szabályok */ } /* Képernyő szélesség alapján */ @media screen and (min-width: 768px) { .container { max-width: 750px; } } /* Maximum szélesség */ @media screen and (max-width: 767px) { .sidebar { display: none; /* Mobilon elrejtve */ } } /* Szélesség tartomány */ @media screen and (min-width: 768px) and (max-width: 1023px) { /* Csak tablet méretben */ } /* Több feltétel (OR) */ @media screen and (max-width: 600px), print { /* Kis képernyőn VAGY nyomtatáskor */ }`

### Media típusok

CSS - Media típusok
`/* all - Minden eszköz (alapértelmezett) */ @media all { } /* screen - Képernyős eszközök */ @media screen { } /* print - Nyomtatás */ @media print { .no-print { display: none; } body { font-size: 12pt; } } /* A screen elhagyható, ha csak szélességet vizsgálsz */ @media (min-width: 768px) { /* Ugyanaz mint @media screen and (min-width: 768px) */ }`

## Breakpointok (töréspontok) BÓNUSZ

A breakpointok azok a képernyőszélességek, ahol a layout megváltozik.

CSS - Gyakori breakpointok
`/* Bootstrap 5 breakpointok */ /* xs: 0-575px (extra small - mobil) */ /* sm: 576px+ (small - nagy mobil) */ /* md: 768px+ (medium - tablet) */ /* lg: 992px+ (large - laptop) */ /* xl: 1200px+ (extra large - desktop) */ /* xxl: 1400px+ (extra extra large) */ /* Mobile-first megközelítés (ajánlott) */ /* Alap: mobil stílusok */ .container { width: 100%; padding: 0 15px; } /* Tablet (768px+) */ @media (min-width: 768px) { .container { max-width: 720px; margin: 0 auto; } } /* Desktop (992px+) */ @media (min-width: 992px) { .container { max-width: 960px; } } /* Nagy desktop (1200px+) */ @media (min-width: 1200px) { .container { max-width: 1140px; } }`

#### Mobile-first vs Desktop-first

- Mobile-first (min-width): Alap stílus mobilra, majd felfelé bővítünk - AJÁNLOTT
- Desktop-first (max-width): Alap stílus desktopra, majd lefelé szűkítünk
- Előny: Mobile-first gyorsabb mobilon (kevesebb felülírás)

### CSS változókkal definiált breakpointok

CSS - Breakpointok rendszerezése
`/* Megjegyzés: CSS változók nem használhatók media query-ben! Csak dokumentációs célra: */ :root { /* Breakpoint értékek referenciának */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; } /* Media query-ben fix értékeket kell használni */ @media (min-width: 576px) { /* sm */ } @media (min-width: 768px) { /* md */ } @media (min-width: 992px) { /* lg */ } @media (min-width: 1200px) { /* xl */ }`

## Reszponzív egységek BÓNUSZ

CSS - Reszponzív egységek
`/* Százalék (%) - szülőhöz képest */ .half-width { width: 50%; /* Szülő 50%-a */ } /* Viewport egységek */ .full-screen { width: 100vw; /* Viewport szélesség 100%-a */ height: 100vh; /* Viewport magasság 100%-a */ } .half-viewport { width: 50vw; /* Viewport fele */ height: 50vh; } /* vmin és vmax */ .responsive-square { width: 50vmin; /* A kisebb viewport méret 50%-a */ height: 50vmin; } .large-element { font-size: 5vmax; /* A nagyobb viewport méret 5%-a */ } /* rem - Gyökér (html) font-size-hoz képest */ html { font-size: 16px; } .text { font-size: 1rem; /* 16px */ padding: 1.5rem; /* 24px */ margin-bottom: 2rem; /* 32px */ } /* em - Szülő font-size-hoz képest */ .parent { font-size: 20px; } .child { font-size: 1.5em; /* 30px (20 × 1.5) */ padding: 1em; /* 30px (saját font-size) */ }`

### clamp() - Fluid értékek

CSS - clamp() függvény
`/* clamp(minimum, preferált, maximum) */ /* Fluid tipográfia */ h1 { /* Min 24px, ideális 5vw, max 48px */ font-size: clamp(1.5rem, 5vw, 3rem); } p { font-size: clamp(1rem, 2.5vw, 1.25rem); } /* Fluid padding */ .section { padding: clamp(20px, 5vw, 60px); } /* Fluid konténer szélesség */ .container { width: clamp(320px, 90%, 1200px); margin: 0 auto; } /* Fluid gap */ .grid { gap: clamp(10px, 2vw, 30px); }`

## Reszponzív képek BÓNUSZ

CSS - Reszponzív képek
`/* Alapvető reszponzív kép */ img { max-width: 100%; /* Nem lehet szélesebb a szülőnél */ height: auto; /* Arányok megőrzése */ } /* Object-fit: kép illesztése konténerhez */ .image-cover { width: 100%; height: 300px; object-fit: cover; /* Kitölti, levághat */ object-position: center; /* Középre igazít */ } .image-contain { object-fit: contain; /* Teljes kép, üres hely maradhat */ } /* Háttérkép reszponzívan */ .hero { background-image: url('hero.jpg'); background-size: cover; background-position: center; min-height: 50vh; } /* Különböző képek különböző méretekhez (HTML) */`
HTML - Reszponzív képek srcset-tel
`<!-- srcset: különböző méretű képek --> <img src="image-800.jpg" srcset=" image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w " sizes=" (max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px " alt="Termék kép" > <!-- picture: különböző képek különböző eszközökre --> <picture> <source media="(min-width: 1200px)" srcset="hero-desktop.jpg"> <source media="(min-width: 768px)" srcset="hero-tablet.jpg"> <img src="hero-mobile.jpg" alt="Hero kép"> </picture>`

## Reszponzív grid rendszer BÓNUSZ

CSS - Reszponzív grid CSS Grid-del
`/* Auto-fit/auto-fill: automatikus oszlopok */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } /* Magyarázat: - auto-fit: annyi oszlop, amennyi 250px-nél nem kisebb - minmax(250px, 1fr): min 250px, max 1fr (egyenlő elosztás) - Automatikusan reszponzív media query nélkül! */ /* Fix oszlopszám breakpointokkal */ .grid-fixed { display: grid; grid-template-columns: 1fr; /* Mobil: 1 oszlop */ gap: 15px; } @media (min-width: 576px) { .grid-fixed { grid-template-columns: repeat(2, 1fr); /* 2 oszlop */ } } @media (min-width: 992px) { .grid-fixed { grid-template-columns: repeat(3, 1fr); /* 3 oszlop */ } } @media (min-width: 1200px) { .grid-fixed { grid-template-columns: repeat(4, 1fr); /* 4 oszlop */ } }`

## Reszponzív navigáció BÓNUSZ

HTML + CSS - Hamburger menü
`<!-- HTML --> <header class="header"> <div class="logo">Logo</div> <button class="menu-toggle" aria-label="Menü">☰</button> <nav class="nav-menu"> <a href="#">Főoldal</a> <a href="#">Termékek</a> <a href="#">Kapcsolat</a> </nav> </header> <!-- CSS --> <style> .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #333; } .logo { color: white; font-weight: bold; } /* Hamburger gomb: csak mobilon látható */ .menu-toggle { display: block; /* Mobilon látható */ background: none; border: none; font-size: 24px; color: white; cursor: pointer; } /* Mobil navigáció: alapból rejtett */ .nav-menu { position: absolute; top: 60px; left: 0; right: 0; background: #333; display: none; /* Alapból rejtett */ flex-direction: column; } .nav-menu.active { display: flex; /* JavaScript kapcsolja */ } .nav-menu a { color: white; padding: 15px 20px; text-decoration: none; border-top: 1px solid #444; } /* Desktop: 768px+ */ @media (min-width: 768px) { .menu-toggle { display: none; /* Hamburger elrejtése */ } .nav-menu { position: static; display: flex; flex-direction: row; background: none; } .nav-menu a { border: none; padding: 10px 20px; } } </style>`

## Gyakori reszponzív minták BÓNUSZ

CSS - Reszponzív sidebar layout
`/* Mobil: egymás alatt */ .page-layout { display: flex; flex-direction: column; } .sidebar { order: 2; /* Sidebar alulra mobilon */ } .main-content { order: 1; } /* Desktop: egymás mellett */ @media (min-width: 992px) { .page-layout { flex-direction: row; } .sidebar { order: 1; /* Sidebar balra */ width: 250px; flex-shrink: 0; } .main-content { order: 2; flex-grow: 1; } }`
CSS - Reszponzív táblázat
`/* Görgethető táblázat mobilon */ .table-container { overflow-x: auto; } /* Vagy: kártya nézetbe alakítás */ @media (max-width: 768px) { table, thead, tbody, tr, th, td { display: block; } thead { display: none; /* Fejléc elrejtése */ } tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; } td { padding: 10px; text-align: right; border-bottom: 1px solid #eee; } td::before { content: attr(data-label); /* data-label attribútumból */ float: left; font-weight: bold; } }`

## Összefoglalás

Ebben a cikkben megismerkedtél a reszponzív webdesign alapjaival:

- Viewport meta tag: Mobilbarát megjelenítés alapja
- Media queries: @media (min-width: ...) feltételes CSS
- Breakpointok: 576px, 768px, 992px, 1200px (mobile-first)
- Reszponzív egységek: %, vw, vh, rem, clamp()
- Reszponzív képek: max-width: 100%, object-fit, srcset
- CSS Grid auto-fit: Automatikus reszponzív rács

#### Következő lépések

Teszteld az oldalad különböző eszközökön: használd a böngésző DevTools responsive módját (F12 → mobil ikon)!

Következő cikk: Átmenetek és animációk - Ismerd meg a CSS transition és animation tulajdonságokat!