# Reszponzív alapok

> Töréspontok, öröklődés, elemek elrejtése, fluid skálázás és tesztelés a Bricks-ben.

Eddig asztali géppel kezdtük az építést, a kisebb képernyőkkel nem foglalkoztunk. Most ugyanezt az oldalt tesszük használhatóvá minden eszközön. A látogatóid több mint fele telefont vagy táblagépet használ: a reszponzív design azt jelenti, hogy az elrendezésed bármilyen képernyőmérethez igazodik.

## Töréspontok

A töréspontok olyan képernyőszélesség-küszöbök, ahol a dizájn alkalmazkodik. A Bricks négy alapértelmezett töréspontot ad:

| Töréspont | Képernyőszélesség | Mire vonatkozik |
|---|---|---|
| Asztali | Alap (nincs korlát) | Laptopok, nagy monitorok |
| Tablet álló | < 992 px | Táblagépek |
| Mobil fekvő | < 768 px | Telefonok fekvő módban |
| Mobil álló | < 478 px | Telefonok álló módban |

Az eszköztár eszközikonjaival váltasz a töréspontok között; a vászon átméreteződik, és azt mutatja, amit az adott méretű képernyő látogatója lát.

**Az öröklődés működése:** az asztali nézetben megadott stílusok automatikusan érvényesek minden töréspontra. Ha kisebb töréspontra váltasz, és ott módosítasz egy értéket, az a töréspontra és az annál kisebbekre vonatkozik. Csak azt írod felül, ami változik, nem kell mindent újradefiniálnod.

Például állítsd egy tároló irányát `Sor`-ra asztali nézetben. Váltsd át Mobil fekvőre, és ott állítsd `Oszlop`-ra. Az asztali és a tablet nézet egymás mellett marad, a mobil fekvő és álló nézet egymás alá kerül.

A Bricks alapból asztali-első (előbb nagyban tervezel, aztán finomítasz kisebbre). A legtöbben ezt használják, mert könnyebb „lefelé skálázni”, mint „felfelé”.

## A reszponzív munkafolyamat

Tegyük reszponzívvá a korábban épített hero szakaszt.

### 1. Tablet ellenőrzése

Kattints az eszköztáron a **Tablet álló** ikonra, és nézd meg a dizájnt. Érdemes ellenőrizni:

- A kétoszlopos elrendezés még kényelmes, vagy szűk?
- A belső margó arányos a képernyő méretével?

### 2. Térközök igazítása

A szakasz 80 px paddinget használ, ami tableten sok függőleges hely.

1. Jelöld ki a szakaszt.
2. Győződj meg róla, hogy a **Tablet álló** töréspont aktív.
3. A fenti és lenti belső margót állítsd `60`-ra.

Az asztali nézet 80 px marad, a tablet és a kisebbek 60 px-t használnak.

### 3. Váltás mobilra, oszlopok egymás alá

Telefonon a kétoszlopos hero (balra szöveg, jobbra kép) túl szűk, ezért egymás alá tesszük.

1. Kattints az eszköztáron a **Mobil fekvő** ikonra.
2. Jelöld ki a hero szakasz tárolóját.
3. Az **Elrendezés** résznél az **Irány** legyen `Sor` helyett `Oszlop`.

A szöveg és a kép most egymás alatt van mobilon, az asztali és tablet nézet egymás mellett marad. Ez a leggyakoribb reszponzív technika: nagy képernyőn vízszintes, kicsin függőleges.

### 4. Mobil álló ellenőrzése

Kattints a **Mobil álló** ikonra a legkisebb nézethez. Ha kell, csökkentsd tovább a belső margót (nagyjából `32`). Ellenőrizd, hogy a gombok elég nagyok-e a kényelmes érintéshez.

## Elemek elrejtése adott töréspontokon

Néha egy elemnek asztali gépen kell látszania, mobilon viszont nem.

1. Jelöld ki az elemet.
2. Válts arra a töréspontra, ahol el kell tűnnie.
3. Az **Elrendezés** résznél a **Megjelenítés** legyen `Nincs`.

Az elem az adott töréspontnál és kisebbnél rejtve van, mindenhol máshol látszik.

## Értékek kezelése különböző képernyőméretekre

Eddig minden töréspontnál kézzel adtunk meg egy értéket (például 60 px paddinget). Ez az elrendezési döntésekhez, például oszlopok egymás alá tételéhez vagy térközök módosításához jól működik.

A másik megközelítés főleg betűméreteknél és térközskáláknál hasznos: töréspontonkénti értékek helyett megadsz egy minimumot és egy maximumot, a böngésző pedig a képernyőszélesség alapján simán kiszámolja a köztes értékeket. Ezeknél nincs szükség töréspontokra.

Példa: egy címsor a legkisebb képernyőn is legalább 24 px, a legszélesebben legfeljebb 48 px. A két érték között automatikusan skálázódik.

A Bricks ezt beépítve tudja. A Stíluskezelő (ugyanaz az ablak, amit a sablonstílusokhoz használtál) **Tipográfia** és **Térköz** lapjain CSS-változóként előállíthatod ezeket a fluid skálákat. Egyszer beállítod a skálát, a változókat alkalmazod az elemeken, és ezeknél az értékeknél a reszponzivitást intézi a rendszer. Ez haladó téma, még nem kell most, de jó tudni, hogy két megközelítés van:

- **Kemény értékek töréspontonként:** explicit, kézi, elrendezéshez ideális.
- **Fluid skálázás:** megadsz egy tartományt, a böngésző számol, tipográfiához és térközhöz ideális.

## A dizájn tesztelése

A szerkesztő vászna előnézetet ad, de mindig tesztelj valódi eszközön vagy a böngésző fejlesztői eszközeivel.

**A szerkesztőben:** használd a töréspont-váltót. A vászon széleit húzva köztes szélességeket is ellenőrizhetsz.

**A böngészőben:**

1. Kattints az eszköztáron az **Előnézet** gombra a weboldal megnyitásához.
2. Nyisd meg a böngésző fejlesztői eszközeit (`F12` vagy `Cmd/Ctrl + Shift + I`).
3. Kapcsold be a Responsive Design Mode-ot (reszponzív nézetet).
4. Tesztelj különböző szélességeken.

A valódi eszközön végzett teszt olyasmit is felfed, amit az emuláció nem: az érintési felület méretét, a betűk tényleges olvashatóságát és a teljesítményt lassabb telefonokon.

## Egyéni töréspontok

A négy alapértelmezett töréspont a legtöbb webhelynek elég. Ha egy adott szélességnél kell töréspont (például 1440 px-es széles asztali nézet), adhatsz hozzá.

Nyisd meg a **Bricks → Beállítások → Általános** lapot, kapcsold be az **Egyéni töréspontok** beállítást, majd a szerkesztőben a töréspont-kezelőből add hozzá őket.

## Hibaelhárítás

**A mobilon végzett módosítások nem látszanak a weboldalon.** Mentsd az oldalt, majd frissítsd erőből a böngészőt (`Cmd/Ctrl + Shift + R`).

**Az asztalon beállított stílusok megváltoznak, amikor töréspontot váltok.** Valószínűleg korábban felülírtad őket egy kisebb töréspontnál. Az öröklődés csak lefelé megy: a mobilon végzett módosítások nem hatnak az asztali nézetre.

**Az elrendezés két töréspont közötti szélességnél eltörik.** Teszteld az olyan szélességeket, mint a 850 px (a Tablet 992 px és a Mobil fekvő 768 px között). Ha itt eltörik, rugalmasabbá kell tenni az elrendezést, vagy egyéni töréspontot kell hozzáadni.

## Amit megtanultál

- a töréspontok működése és a lefelé öröklődés,
- térközök igazítása és oszlopok egymás alá tétele kisebb képernyőkön,
- elemek elrejtése adott töréspontokon,
- a két megközelítés: töréspontonkénti felülírás és fluid skálázás,
- a dizájn tesztelése különböző képernyőméreteken.