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.