Reszponzív weboldal készítése (Viewport és CSS Media Query)
Ebben a leckében azt fogjuk bemutatni, hogy hogyan készíthetünk olyan weboldalt, amely reszponzív. A reszponzívitást a Viewport és a Media Query segítségével fogjuk elérni. De még mielőtt beleugranánk a viewport és CSS Media Query használatába, tisztázzuk, hogy mit értünk reszponzív weboldal alatt.
Mi az a reszponzív weboldal?
A reszponzív weboldalak úgy vannak megtervezve és elkészítve, hogy a megjelenésük optimális legyen, azaz a weboldal könnyen olvasható, navigálható legyen különböző eszközökön. A reszponzívitást úgy kell megvalósítani, hogy ehhez ne kelljen több weboldalt elkészíteni, hanem ugyanaz a weboldal szolgálja ki az összes eszközt, de minden eszközön más legyen a megjelenés. Fontos, hogy a megjelenés minden weboldalon optimális legyen, azaz ami számítógépen olvasható, az telefonon is ugyanolyan jól olvasható legyen, ne lógjanak túl vagy ne legyenek túl kicsik a betűk.
Mi az a viewport?
Viewport-nak nevezzük azt a területet, amit a felhasználó egy weboldalból lát. Ez a terület értelemszerűen változó, hiszen egy mobiltelefon kijelzője sokkal kisebb, mint egy monitoré. De még telefon és telefon között is van eltérés.
A viewport arra szolgál, hogy megpróbálja ezeket a megjelenéseket különböző eszközök képernyőire szabni.
A viewport beállítása
Az alábbi meta elemet kell a HTML dokumentum HEAD részébe illesztenünk:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Code language: HTML, XML (xml)Ez a kód segít a böngészőnek megmondani, hogy mit tegyen az adott oldallal. A width=device-width rész beállítja, hogy az oldal szélessége kövesse a képernyő szélességét. Míg az initial-scale=1.0 rész a kezdeti nagyítást állítja be a böngésző számára.
Mi az a Media Query?
A Media Query (tudtommal nincs elterjedt magyar megfelelője) egy CSS technika, amellyel azt állíthatjuk be, hogy egyes kijelzőkön (és kijelző méreteken) hogyan jelenjen meg az oldal. Azaz megszabhatjuk, hogy egy kicsi telefonon teljesen más elrendezést kapjon a weboldalunk, mint egy nagy monitoron.
A Media Query beállítása
Az alábbi kód segítségével állíthatjuk be, hogy egy adott képernyőméreten, hogyan jelenjen meg a weboldalunk:
@media only screen and (MAX/MIN-width: MÉRET) {
...
}
Code language: CSS (css)A MAX/MIN helyére csak az egyik feltételt kell megadnunk, attól függően, hogy mit szeretnénk elérni. Ha azt szeretnénk, hogy 400 pixeltől kezdve legyen érvényes egy CSS elrendezés, akkor a MIN értéket kell választanunk. Ha viszont azt szeretnénk, hogy maximum 800 pixelig legyen érvényes elrendezés, akkor a MAX értéket kell megadnunk. Természetesen mindkettőt megadhatjuk, olyankor a két érték közötti kijelzőkön fog érvényes lenni az elrendezés. A MÉRET helyére pixelben kell megadni a kijelző méretét.
Gyakori töréspontok
Hogy mit nevezünk töréspontoknak? Töréspontoknak azokat a kijelző méreteket nevezzük, amelyek a leggyakrabban előfordulnak. Ha szeretnénk a weboldalunkat tökéletesen optimalizálni minden kijelzőre, akkor legalább ezeket a töréspontokat meg kell határoznunk a weboldalunkon:
- @media only screen and (max-width: 600px)
- @media only screen and (min-width: 600px)
- @media only screen and (min-width: 768px)
- @media only screen and (min-width: 992px)
- @media only screen and (min-width: 1200px)
- @media only screen and (min-width : 1824px)
Tájolás meghatározása
Nem csak a kijelző méretét határozhatjuk meg, hanem az eszközök tájolását is, azaz, hogy az adott eszköz állítva vagy fektetve van használva. A fekvő tájolást a lenti kóddal adhatjuk meg:
@media only screen and (orientation: landscape) {
...
}
Code language: CSS (css)
