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!