Főoldal

"Mérnököt a mérnöktől"

A Schönherz Bázis összeköti az állást kereső és állást kínáló mérnököket.

CV küldés

Küldj önéletrajzot! Gyorsan, egyszerűen.
Megjegyzésbe írd be a pozíció nevét.
CV küldés

Iratkozz fel hírlevelünkre!

Hírek

Reszponzív design tutorial – Tanulj reszponzív web design-t csupán 5 perc alatt
Reszponzív design tutorial – Tanulj reszponzív web design-t csupán 5 perc alatt

Ebben a cikkben annyi reszponzív webdesign technikát fogok megtanítani, amennyit csak tudok 5 perc leforgása alatt. Ez természetesen nem lesz elég arra, hogy megfelelő mélységben foglalkozzunk vele, de adni fog egy alapvető áttekintést a legfontosabb koncepciókról, amiket én az alább felsoroltakként tartok számon:


  • Relatív CSS mértékek
  • Média lekérdezések
  • Flexbox
  • Reszponzív tipográfia 

Ha a cikk elolvasása után mélyebbre szeretnél ásni a témában, akkor ránézhetsz a Scrimbán található reszponzív webfejlesztői gyorstalpalónkra, mely lehetővé teszi majd számodra professzionális reszponzív weboldalak fejlesztését.



De egyelőre kezdjük az alapokkal!


Relatív CSS mértékek


A reszponzív webdesign lényegét a relatív CSS mértékek adják. Ezek olyan mértékek, melyek az értéküket egy másik, külső értéktől kapják. Ez azért kényelmes, mert lehetővé tesz olyan dolgokat, hogy például a kép szélessége a böngésző szélessége alapján változzon.

A leggyakoribbak az alábbiak:


  • %
  • em
  • rem
  • vw
  • vh


Ebben a cikkben a százalék % mértékkel fogunk kezdeni, és utána vetünk egy pillantást a rem mértékre az utolsó szakaszban.

Mondjuk, hogy van egy nagyon egyszerű weboldalad, mondjuk egy ilyen:



A HTML kódja a következő:


<body>
    <h1>Welcome to my website</h1>
    <image src="path/to/img.png" class="myImg">
</body>


Ahogy az alábbi GIFen látható, alapjáraton a képünknek lesz egy fix szélessége:



Ez nem különösebben reszponzív, szóval változtassuk meg 70 százalékra inkább.

Egyszerűen a következőt fogjuk tenni:


.myImg {
    width: 70%;
}


Ez beállítja a kép szélességét a szülője szélességének 70 százalékára, ami pedig a <body> tag. Mivel a <body> tag a képernyő teljes szélességét használja, a kép így mindig a képernyő szélességének 70 százaléka lesz.


Íme az eredmény:



És ennyire egyszerű egy reszponzív képet készíteni!


Média lekérdezések használata a mobilos élmény fokozásához


Egyetlen probléma viszont van a reszponzív elrendezésünkkel, mégpedig az, hogy furcsán néz ki kicsi képernyőkön. A 70%-os szélesség túl keskeny, amikor mobilról nézzük az oldalt. Nézd meg magadnak:



Hogy ebben a szituációban jobban nézzen ki a weblap, a legjobb, ha média lekérdezéseket alkalmazunk. Ezek ugyanis lehetővé teszik számodra, hogy különböző beállításokat alkalmazz például a képernyő szélességétől függően. Alapvetően mondhatjuk, hogy ha a képernyő szélessége kisebb, mint 768px, használj más beállításokat.


Így hozunk létre média lekérdezéseket CSS-ben:


@media (max-width: 768px) {
    .myImage {
        width: 100%
    }
}

Ez a CSS blokk csak akkor lép életbe, ha a képernyő szélessége kevesebb, mint 768 pixel.


Itt az eredmény:



Ahogy láthatod, az oldalnak van egy töréspontja, ahol a kép hirtelen szélesebb lesz. Ezen a ponton 768 pixel széles a böngésző, és a kép így átáll 70%-ról 100%-ra.


A Flexbox használata a navigációs sávnál


A következő a Flexbox. Egyszerűen nem tanulhatsz a reszponzivitásról a Flexbox nélkül. Teljesen megváltoztatta a reszponzív designt amikor egy pár éve bemutatták, mivel sokkal egyszerűbbé teszi az elemek pozicionálását egy tengely mentén.


Hogy tudjuk használni a Flexboxot, egy kicsit komplexebbé tesszük az oldalunkat egy navigációs sáv hozzáadásával a cím fölé. Itt a HTML része:


<nav>
    <a href="#">Home</a>
    <a href="#">About me</a>
    <a href="#">Contact</a>
</nav>

Alapértelmezetten ez így fog kinézni:



A navigációs elemeink mind a bal oldalra vannak zsúfolva, ami nem az, amit mi szeretnénk. Azt szeretnénk, hogy egyenletesen legyenek eloszlatva az oldal mentén.


Hogy ezt elérjük, egyszerűen flexboxszá alakítjuk a navigációs konténerünket, és utána használjuk a mágikus justify-content property-t.


nav {
    display: flex;
    justify-content: space-around;
}

A display: flex rugalmas dobozzá változtatja a <nav>-ot, a justify-content: space-around pedig megmondja ennek a doboznak, hogy a benne lévő elemek körül legyen hely. Így a böngésző egyenlően elosztja az összes felesleges helyet a három elem között.

Íme a kinézete. 


És ahogy észreveheted, szépen skálázódik:



Reszponzív tipográfia: rem


Az utolsó lépés, hogy a tipográfiánkat is reszponzívvá alakítjuk. Azt akarjuk, hogy a navigációs sáv és a cím is összemenjen egy kicsit, amikor a képernyő kisebb, mint 768 pixel széles (a média lekérdezéses töréspontunk, emlékszel?).


Ennek egy módja lenne, hogy csökkentjük az összes betűméretet a média lekérdezésben:


@media (max-width: 768px) {
    nav {
        font-size: 14px;
    }
    h1 {
        font-size: 28px;
    }
}

Ez viszont nem ideális. A végén lehet, hogy számos töréspontunk lenne, többszörösített elemekkel (h2, h3, paragrafusok, stb.). Ennek eredményeképp oda kellene figyelnünk az összes elemre minden egyes töréspontnál, ez pedig követhetetlen lenne.


Azonban valószínűleg többnyire ugyanazon a módon fognak egymáshoz viszonyulni a különböző töréspontok folyamán. Például a h1 mindig nagyobb lesz, mint a paragrafus.


Szóval mi lenne, ha lenne egy mód arra, hogy egy tényezőt beállítsunk, és a többi betűméretet rávennénk, hogy annak a tényezőnek megfelelően skálázódjanak?


Lépj be a rem világába!


A rem tulajdonképpen a betűméret értéke, amelyet megadsz a <html> elemnél. Pont így:


html {
    font-size: 14px;
}

Így ebben a dokumentumban egy rem 14 pixellel egyenlő.

Ez azt jelenti, hogy a weboldalunkon minden betűméretet megadhatunk rem mértékekben:


h1 {
    font-size: 2rem;
}

nav {
    font-size: 1rem;
}

Ezután pedig egyszerűen megváltoztatjuk a <html> tag betűméretének értékeit a média lekérdezésen belül. Ez biztosítja, hogy a h1 és a nav elemek betűmérete is változni fog.

Így változtatjuk meg a rem értékét a média lekérdezésben:


@media (max-width: 768px) {
    html {
        font-size: 14px
    }
}

És csupán ennyivel minden betűmérethez is lett töréspontunk. Vegyük észre, hogyan változik a betűméret, ahogy az oldal áthalad a 768 pixeles törésponton:



Még csak öt perce vagyunk itt, de máris megtanultad, hogyan vedd rá a betűméreteket, képeket és navigációs elemeket, hogy reagáljanak az oldal szélességére. Ez elég jó, megtetted az első lépéseidet a reszponzív weboldalak készítéséhez legfontosabb skillek elsajátítása felé.


Ha mindez elnyerte a tetszésed, és szeretnéd folytatni tanulmányaidat ezen a téren, akkor csak javasolni tudom a kiterjedt Scrimba kurzusunkat! A YouTube ezen témában egyik legnépszerűbb tanára tanítja, és professzionális szintre fog téged vinni a reszponzív webdesignban.



Sok sikert a kódoláshoz!


(Forrás)

***
Ha Te is kreatív, kihívásokkal teli mérnök állást keresel minoségi munkáltatónál, jó helyen jársz, mert a Schönherz Bázis épp azért jött létre, hogy Neked segítsen.
Gyere, nézz szét aktuális állásaink között!


2019.09.12