Reszponzív Webdizájn (Media Queries)
A 2000-es években a webfejlesztőknek könnyű dolguk volt: mindenki 1024x768 pixeles asztali monitorokon netezett. Ma a forgalom több mint 60%-a mobiltelefonokról érkezik, a képernyőméretek pedig az okosóráktól a 4K-s tévékig terjednek. Egy modern weboldalnak minden eszközön tökéletesen kell megjelennie. Ezt hívjuk Reszponzív Webdizájnnak (RWD).
A Google és a Mobile-First Indexing
Mielőtt belemegyünk a kódba, egy kritikus SEO tény: A Google ma már kizárólag a weboldalad mobilos verzióját nézi, amikor eldönti, hányadik helyre rangsoroljon a keresőben. Ha az oldalad asztali gépen gyönyörű, de mobilon szétesik, olvashatatlanul kicsi a betű, vagy egymásra csúsznak a gombok, a Google kíméletlenül hátrasorol.
Az alapfeltétel: A Viewport Meta Tag
Ahogy a HTML kurzusban tanultuk, a reszponzivitás nulladik lépése, hogy a HTML fájlod <head> szekciójában ott legyen ez a sor:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Enélkül a mobilböngészők megpróbálják az asztali nézetet lekicsinyíteni a telefon képernyőjére, ami olvashatatlan eredményt szül.
A Varázslat: CSS Media Queries
A Media Query (Média lekérdezés) egy CSS technika, amivel feltételeket szabhatunk a stíluslapunkban. Azt mondjuk a böngészőnek: "Ha a képernyő szélessége kisebb, mint X pixel, akkor alkalmazd ezeket az új CSS szabályokat, és írd felül a régieket."
A szintaxis a @media szabállyal kezdődik:
/* Alapértelmezett asztali nézet (3 oszlopos Grid) */
.tartalom-racs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
/* Ha a képernyő szélessége 768 pixel vagy annál KISEBB (Tabletek és mobilok) */
@media (max-width: 768px) {
.tartalom-racs {
/* Felülírjuk a rácsot 1 oszloposra */
grid-template-columns: 1fr;
}
h1 {
/* Kisebbre vesszük a főcímet mobilon */
font-size: 2rem;
}
}A "Mobile-First" (Mobilra Elsőként) Megközelítés
A fenti példában az asztali nézetet írtuk meg először, és a max-width segítségével butítottuk le mobilra. Ezt hívják Desktop-First megközelítésnek. A modern fejlesztők pont fordítva csinálják!
A Mobile-First elv lényege, hogy az alap CSS kód a mobiltelefonokra íródik (mivel ez a leggyakoribb és legfontosabb nézet). Ezután min-width (minimum szélesség) Media Query-ket használunk, hogy ahogy nő a képernyő, úgy adjunk hozzá komplexebb elrendezéseket.
/* 1. ALAPÉRTELMEZETT (Mobil nézet) */
.tartalom-racs {
display: grid;
grid-template-columns: 1fr; /* Mobilon 1 oszlop, egymás alatt */
gap: 10px;
}
/* 2. TABLET NÉZET (Ha a képernyő legalább 768px széles) */
@media (min-width: 768px) {
.tartalom-racs {
grid-template-columns: 1fr 1fr; /* Tableten 2 oszlop */
}
}
/* 3. ASZTALI NÉZET (Ha a képernyő legalább 1024px széles) */
@media (min-width: 1024px) {
.tartalom-racs {
grid-template-columns: 1fr 1fr 1fr; /* Asztali gépen 3 oszlop */
gap: 30px;
}
}Miért jobb a Mobile-First? Mert a mobiltelefonok processzora gyengébb. Ha a mobilnak nem kell letöltenie és feldolgoznia a bonyolult asztali CSS szabályokat (hogy aztán azonnal felülírja őket), az oldal sokkal gyorsabban fog betölteni. A sebesség pedig jobb SEO helyezést jelent.