CSS media queries
A media query segítségével a weboldal stílusait a képernyő méretéhez, az eszköz tulajdonságaihoz vagy a felhasználói preferenciákhoz igazíthatjuk. Ez a reszponzív webdesign alapvető technikája, amely lehetővé teszi, hogy ugyanaz a weboldal különböző eszközökön optimálisan jelenjen meg.
Alapfogalmak
A media query szintaxisa a @media kulcsszóval kezdődik, majd egy vagy több feltétel következik. Ha a feltétel teljesül, a benne lévő CSS szabályok alkalmazásra kerülnek. A leggyakoribb feltételek közé tartozik a min-width és a max-width, amelyek a képernyő szélességére vonatkoznak.
Az alábbi példa bemutatja, hogyan változtathatjuk meg a háttérszínt, ha a képernyő szélessége kisebb, mint 600px.
Összetettebb feltételek
A media query-kben logikai operátorok is használhatók, mint az and, not és only. Például kombinálhatjuk a min-width és a max-width feltételeket, hogy pontos tartományokra célozzunk. Ez lehetővé teszi, hogy pontosan meghatározzuk, mely eszközökön milyen stílus legyen érvényes.
Gyakran használt feltételek
A media query nem csak a szélességet és magasságot vizsgálhatja. Használhatjuk az orientation feltételt a portré vagy tájkép mód megkülönböztetésére, valamint a prefers-color-scheme feltételt a sötét vagy világos mód támogatásához.
| Feltétel | Használat |
|---|---|
| max-width | Apply styles up to a certain width |
| min-width | Apply styles from a certain width upwards |
| orientation | Target portrait or landscape devices |
| prefers-color-scheme | Adapt to dark or light mode preferences |
Tippek a media query használatához
A reszponzív webdesignhoz elengedhetetlen a media query helyes alkalmazása. Íme néhány tipp a hatékony használathoz:
- Alkalmazz mobil-first megközelítést: először a kis képernyőkre tervezz, majd bővítsd nagyobb méretekhez.
- Használj egységes és jól dokumentált breakpointokat, hogy könnyebb legyen a csapatmunka.
- Ne feledkezz meg a felhasználói preferenciákról, például a sötét mód támogatásáról a prefers-color-scheme segítségével.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
