Reszponzív alapok

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.