Hét Reszponzív Webdesign

A1.1. Mit fogsz megtanulni?
Üdvözöllek a Reszponzív webdesign projektben.
Az itt található leckékben megtanulhatod,
 hogyan készíts olyan weboldalt, amely alkalmazkodik a különböző

képernyőméretekhez,
 mi is a reszponzív design eszköztára, és
 közben egy teljesen flexibilis blogsablont is elkészítesz.
Jó szórakozás lesz! :)
Amint készen állsz, kezdhetjük is.
1.2. Mit fogsz megépíteni?

Az egyik blogoló barátunk új kinézetet szeretne az oldalának. Minket kért meg,
hogy segítsünk, és a következő specifikációs listát adta:
 Az oldalon jelenjen meg a cím és a jelmondat (tagline).

 Egy 'like' (tetszik) és egy 'follow' (követem) gomb.
 Az oldalnak meg kell tudnia jeleníteni a bejegyzéseket. Minden
bejegyzéshez tartozik egy címsor, egy kép, egy hosszabb szöveg első
bekezdése és egy 'read more' (tovább olvasom) link.
 Legyen az oldal alján egy 'load more' (még több betöltése) link.
 Az oldalnak teljesen reszponzívnak kell lennie, külön-külön optimális
elrendezéssel telefonról, táblagépről és asztali gépről nézve.
Egy designert már meg is kért, hogy készítsen pár vizuális tervet (mock-up), így
most nem kell foglalkoznunk a wireframe-ek (drótváz) elkészítésével:
Ezt az oldalt fogjuk megépíteni ebben a projektben.
1.3. Néhány definíció

Mielőtt páros lábbal ugorhatnánk a reszponzív design mélyvízébe, beszéljünk
néhány kulcsfontosságú dologról.
Mi az a Reszponzív webdesign?
A web mobiltelefonokról történő böngészése az elmúlt pár évben

robbanásszerűen hódított tért. 2016-ban a teljes internetforgalmat tekintve már
meg is haladta a mobilböngészők aránya az asztali gépeken futtatott böngészők
arányát, és nem úgy tűnik, mintha ez a trend lassulna. Amellett, hogy ez
nagyszerű, a designerek és programozók elé új kihívásokat görgetett.
A statikus elrendezésű honlapok világa lassan teljesen a múlté lesz. A különböző

méretű kijelzők megjelenésével manapság nem egy (vagy pár) nézetre kell
optimális megjelenést tervezni, hanem különböző méretek és arányok százaira.
A reszponzív webdesign próbál választ adni erre a kihívásra.
A négy pillér
A reszponzív webdesign tulajdonképpen különböző technikák és elvek

gyűjteménye, amelyek nagyvonalúan a következő négy kategóriába
sorolhatóak:
 relatív egységek (relative units),

 reszponzív elrendezések (responsive layouts),
 media queryk (médialekérdezések) és
 reszponzív média.
A következő leckékben ezekről a témákról tanulhatsz részletesen. Közben pedig

– a gyakorlatban alkalmazva a tanultakat – megépíted a blogsablont.
Készen állsz? Ha igen, találkozzunk a következő leckében, ahol megépítjük az

oldal vázát.
Mire kínál megoldást a reszponzív webdesign?

A különböző méretű kijelzők megjelenésével manapság rengetegféle méretű, elrendezésű
és arányú felületre kell optimalizálni a megjelenést.
A böngészők beépített stíluslapja miatt a különböző böngészők eltérően jelenítik meg a
weboldalakat.
A böngészők alapesetben csak olyan betűtípusokat tudnak megjeleníteni, amelyek már
telepítve vannak a böngészésre használt számítógépen.
Reszponzív webdesign nélkül csak nagyon bonyolult megoldásokkal lehet függőlegesen
középre igazítani a tartalmat.
Ellenőrzöm a válaszom
Úgy-úgy, ami jó, az nem rossz!
2.1. A HTML megépítése

Mielőtt belemerülünk a reszponzív design CSS-trükkjeibe, építsük meg az oldal
HTML-vázát. A folyamat során a "mobile first" (elsőként mobilra) elvet követjük,
és a HTML5 szemantikus elemeit fogjuk használni.
Megjegyzés: a "mobile first" (elsőként mobilra) megközelítés azt jelenti, hogy

elsőként az oldal mobileszközökre szánt verzióját építjük meg, és ezt bővítjük a
táblagépekre majd az asztali gépekre szánt verzióval. Az elvvel bővebben a
Reszponzív elrendezés című leckében fogunk megismerkedni.
Ha a mobiltelefonra szánt tervekre pillantasz, láthatod, hogy az oldal két nagy

egységből áll:
 egy, a főcímet és kapcsolódó tartalmakat magába foglaló rész (header) és

 a fő tartalmat magába foglaló rész.
Elsőként adjuk hozzá ezeket a body részhez:

<body>
<header></header>
<main></main>
</body>
Megjegyzés: Ez a két elem szemantikus (semantic). Ahogy azt már korábban

megtanultad, a szemantikus elemek a HTML-kódot könnyebben olvashatóvá,
érthetőbbé és fenntarthatóbbá teszik mind magunk, mind a többi fejlesztő,
mind a keresőrobotok (például az internetet indexelő Google web crawler)
számára.
A fő rész
A main elem való az oldal fő tartalmi részének tárolására. A mi esetünkben a fő

tartalom a bejegyzések listája és a "Load more stories" (további történetek
betöltése) link. A link egy egyszerű a (anchor tag). A bejegyzéseket pedig
az article (cikk) szemantikus HTML-elembe fogjuk csomagolni. Listázzunk
három bejegyzést.
Az article egységek fogják tartalmazni a cikkek címét, a hozzájuk tartozó

képet, az első bekezdést és a további tartalomra mutató linket. A végső kód ezek
alapján:
<main>
<article>
<h2>A Cool Article About Something Edgy</h2>
<img src="" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nullam sit amet metus at velit sodales blandit eu nec nibh.
Etiam ac facilisis dui. Quisque lorem sapien, facilisis non purus
eu, hendrerit feugiat neque. Nam malesuada et lectus vel
pellentesque.</p>
<a href="#">Read more</a>
</article>
<article>
<h2>A Strong Opinion On a Thing That Just
Happened</h2>
<img src="" alt="">
pellentesque.</p>
</article>
<article>
<h2>A Listicle For You and Your Boyfriend</h2>
<img src="" alt="">
pellentesque.</p>
</article>
<a href="#">Load more stories...</a>
</main>
Megjegyzés: Minden elemhez hozzáadtam valamilyen kitalált tartalmat. Amikor

prototípusokon dolgozol, nem sokat segítenek az üres, tartalom nélküli
egységek. Ha nem tudod a végső tartalmat használni, nyugodtan használj a
helyet ideiglenesen kitöltő szövegeket és ábrákat (placeholder texts and
placeholder images). Népszerű megoldás az úgynevezett Lorem Ipsum szöveg
alkalmazása. Ez olvasható szöveg benyomását kelti elsőre, de a tartalmával nem
tereli el a figyelmet. Ezen az oldalon tudsz például Lorem Ipsum szöveget
generálni, és olvasni a történelméről. Ha ennél többre vágysz, sok alternatíva
létezik, például a Bacon Ipsum vagy a Samuel L. Ipsum.
https://www.lipsum.com/
Bacon Ipsum - A Meatier Lorem Ipsum Generator
http://www.slipsum.com/
Melyik szemantikus tag jelöli a weboldal fő tartalmát?
<header>
<h1>
<main>
<article>
Ez igazán szép megoldás volt. Büszke lehetsz magadra!
2.2. Egyéb elemek hozzáadása

A HTML-váz majdnem készen áll, már csak a három képet kell beilleszteni, egyet
mindegyik bejegyzéshez. Ideiglenes megoldásként az Imgurt fogjuk használni,
hogy tárolja a képeinket. Itt találod a képeket:
image-01: http://i.imgur.com/rGWSW9i.jpg
image-02: http://i.imgur.com/JS1RcVU.jpg
image-03: http://i.imgur.com/q80S4Ro.jpg
Add a képeket a létező vázhoz, és adj meg a képeket helyettesítő szöveget

az alt="" attribútum segítségével. Emlékezz, az alt attribútum tárol a képekről
alternatív információt, ha a felhasználó valami ok miatt nem tudná elérni a
képeket (mondjuk az internetkapcsolat hibája miatt, egy szerveroldali hiba
miatt, vagy mert felolvasóprogramot használ).
Megjegyzés: Ha az előző feladatból másoltad a kódot, az img tagek már

léteznek, csak töltsd meg azokat a megfelelő tartalommal.
+1 tipp: Ugyanúgy, ahogy a szövegek esetében, ideiglenes képekre is szükséged

lesz, amikor prototípusokat építesz. Remek hely jó minőségű, szabadon
felhasználható képek keresésére például az Unsplash. Ha innen származó
képeket használsz, már csak arra kell ügyelned, hogy a szuper minőség miatt
hatalmasak. Csökkentsd a méretüket, vagy az oldalad betöltési ideje jelentősen
megnő.
https://unsplash.com/
Feladat:
Add hozzá a három képet a HTML-vázhoz, és írd be az alternatív leírásukat a

hozzájuk tartozó alt attribútumokba. Másold ide a bined URL-címét.
A megoldásod:
https://codepen.io/SziRom/pen/wvmapQP
2.3. Egy egyszerű CSS Reset

Kész a vázunk, rátérhetünk a CSS-re.
Ha a JSBin Output-paneljére tekintesz, láthatod, hogy az alapértelmezett

stílusokat (user agent stylesheet) a böngésző már alkalmazta a megjelenítés
során. Ahogyan azt korábbi projektekben is tettük, valahogyan
érvénytelenítenünk kell ezeket, hogy egy egységes alapot teremtsünk. Így
biztosítható a kívánt design egységes megjelenítése a lehető legtöbb
böngészőben.
Alkalmazzunk egy CSS reset (CSS alaphelyzetbe állító) megoldást. Az interneten

sok létező CSS resetet találhatsz, így általában nem kell megírnod a saját
változatodat minden projektnél. Ezeket a megoldásokat CSS szakértők írják,
rengeteg tesztelésen mennek át, és sok visszajelzést kapnak. Használd
bizalommal tehát az elérhető CSS reset megoldásokat, hogy időt és energiát
spórolj.
Ehhez a projekthez Eric Meyer egyszerű CSS reset megoldását fogjuk használni,
amit itt találhatsz. A későbbiekben csak keress rá bármikor a Google
segítségével (CSS reset keresőkifejezés), és már másolhatod is.
/* ==== A SIMPLE CSS RESET FROM ERIC MEYER ==== */
html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Megjegyzés: Gyors emlékeztető – megjegyzést fűzhetsz a CSS-kódhoz, ha azt
perjelek és csillagok közé teszed (/* Ide írhatsz megjegyzést. */.
Használhatod a megjegyzéseket arra, hogy egy-egy rész működését magyarázd
el, vagy arra, hogy rendszerezd a kódodat. Ebben a kódrészletben mind a
kettőre találsz példát.
A CSS reset kerül legfelülre - miért is?
A CSS reset mindig legfelülre kerül a kódodban, minden más szabály elé. Miért?
A CSS a Cascading Style Sheets (rangsorolt stíluslapok) rövidítése, nem
véletlenül. Ha egynél több értéket adsz meg ugyanannak a tulajdonságnak, az
utolsó előfordulás lesz érvényes a megjelenítéskor.
Nézd meg ezt a példát:
p {
color: red;
}
p {
color: green;
}
p {
color: blue;
}
Három szín értéket adtunk meg ugyanannak a p kiválasztónak. Ha átmásolod a

JSBinbe ezt a kódrészletet, láthatod, hogy a bekezdések kék színűek lesznek. Ez
azért van így, mert a kék érték minden megelőző értéket felülírt. (Ha végeztél,
ne felejtsd el kitörölni a JSBinből a kódrészletet).
Emiatt a működés miatt fontos a CSS resetnek legfelülre kerülnie. Így egyrészt
minden előtt betöltődik, és biztosítja az egységes alapot, másrészt, ha bármilyen
szabály megelőzné, azt jó eséllyel írná felül, és az oldal nem úgy jelenne meg,
ahogy szeretnéd.
Hova kerül a CSS reset?

A CSS-kód legvégére, minden más szabály után, mert ha ugyanahhoz a tulajdonsághoz
több értéket is deklarálunk, a böngésző csak a legelsőt fogja figyelembe venni.
A CSS-kód legvégére, minden más szabály után, mert ha ugyanahhoz a tulajdonsághoz
több értéket is deklarálunk, a böngésző csak a legutolsót fogja figyelembe venni.
A CSS-kód legelejére, minden más szabály elé, mert ha ugyanahhoz a tulajdonsághoz
több értéket is deklarálunk, a böngésző csak a legelsőt fogja figyelembe venni.
A CSS-kód legelejére, minden más szabály elé, mert ha ugyanahhoz a tulajdonsághoz
több értéket is deklarálunk, a böngésző csak a legutolsót fogja figyelembe venni.
Helyes válasz. Piros pont jár érte!
2.4. Segítő színek

A következő lépésben egy kicsit kisegítjük magunkat – hozzáadunk pár színt. Ha
az egyes nagyobb egységek hátterét átlátszó színekkel töltöd ki, könnyebben
tudsz elrendezéseket kódolni, mert pontosan látod, hogy mi történik az egyes
blokkokkal.
Adj valamilyen osztály (class) attribútumot a header, main és article elemeknek.
Állíts be mindegyiknek valamilyen átlátszó háttérszínt.
Mellékeltem az én megoldásomat (válassz bátran olyan színeket és

osztályneveket, amelyek neked jobban tetszenek):
/* ==== HELPER COLORS FOR LAYOUT ==== */
.main-header {
background-color: rgba(255, 248, 53, .3);
}
.primary-content {
}
.post {
}
Feladat:
Adj áttetsző háttérszínt a <header>, <main> és <article> elemeknek. Másold ide
a bined URL-címét.
A megoldásod:
https://codepen.io/SziRom/pen/qBodpGO
2.5. Minden készen áll

Végeztünk az előkészítési munkálatokkal. A HTML-váz készen áll, az
alapértelmezett stílusokat felülírtuk, és még pár segítő színt is adtunk a
nagyobb egységeknek, hogy az elrendezést könnyebben lekódolhassuk.
Minden egyes lépéshez itt egy lehetséges megoldás, ha elakadtál volna:
 A HTML-váz.
 Képek hozzáadása.
 Egyszerű CSS reset.
 Segítő színek.
Ha eddig nem követted a feladatokat kódolva is, itt a remek lehetőség, hogy
lemásold az utolsó lépés példakódját, és csatlakozz a következő lépésben, ahol a
tipográfiával fogunk foglalkozni.
Találkozunk a következő leckében. :)
3.1. Hol tartunk?

Az előző lecke végére egy jó alapot teremtettünk, amit itt láthatsz.
Ez még most nem a legcsinosabb weblap, ami valaha létezett. Jó pár dolgunk
van még vele, mielőtt elküldhetnénk a barátunknak a kész munkát. Elsőként azt
a betűkkel kapcsolatos káoszt próbáljuk meg felszámolni, amit a CSS reset
okozott.
A tipográfia aprólékos tudománya nem szerves része a reszponzív webdesign-

nak, úgyhogy csak egy pár alapvetőbb dologra térünk most ki:
 hogyan válassz betűkészleteket, ha nem vagy designer,

 hogyan adj a projektedhez betűkészleteket külső forrásból, és
 hogyan állítsd be ezeket helyesen a CSS-ben.
Megjegyzés: Korábbi projektekben már találkozhattál hasonló témákkal. Most

egy kicsit még mélyebbre megyünk, és kiegészítjük az eszköztárad.
Ha készen állsz, kezdjünk is bele, és szépítsük meg a blogunk szöveges részét!
3.2. A projekthez megfelelő betűkészletek

kiválasztása
Nem könnyű eldönteni, hogy milyen betűkészleteket használj. Ha designer is
dolgozik a weboldaladon, nem is a te feladatod lesz. Ha viszont mégis neked kell
dönteni, a következő három szabály segíthet:
1. Válassz olyan betűtípust, amely olvasható. Mindegy, mennyire jól mutat

valamelyik, ha a felhasználó nem tudja elolvasni.
2. Válassz legalább két különböző betűtípust – egyet a folyó szövegeknek,
egyet a címsoroknak.
3. Használj bizonyítottan jó betűpárosításokat. Egy gyors keresés ("font
pairings" keresőkifejezésre) remek inspirációs forrás lehet. (Mi különösen
kedveljük az alábbiakat: Font Pair, Digital Synopsis, Google Type Project
by 25x52.)
A jó külcsín alapja a jól megválasztott betűk. A fentieket követve a fél siker már
garantált.
Megjegyzés: A blogsablonhoz a példakódban a "Merriweather" betűtípust

választottam a folyó szövegekhez és az "Open Sans" betűtípust a címsorokhoz.
Bátran használd ezeket, vagy találj neked jobban tetsző párosítást.
Feladat:
Melyik két betűtípust választottad a blogsablonodhoz? Másold ide a nevüket.
A megoldásod:
Roboto Condensed & Roboto

https://www.fontpair.co/
https://www.fontpair.co/
https://femmebot.github.io/google-type/
3.3. Nem telepített betűkészletek használata

Ha kiválasztottad a betűkészleteket, elérhetővé kell tenned azokat a
projektedben. A böngésző alapesetben csak azokat a betűtípusokat tudja
megjeleníteni, amelyek a böngészőt futtató számítógépen telepítve vannak (és
ebből nincs sok).
Megjegyzés: A minden rendszeren biztosan elérhető betűtípusokra a web safe
font (webbiztos betűtípus) kategóriával szoktak hivatkozni.
Ha nem webbiztos betűtípust használsz, neked kell gondoskodnod arról, hogy a

böngésző elérhesse a megfelelő betűkészletet. Ennek több módja is van, most
egy szabadon elérhető Google Fontot fogunk belinkelni.
Nyisd meg a Google Fonts oldalát, és kövesd az alábbi lépéseket:
Megjegyzés: Ha más betűtípusokat választottál, csak cseréld ki a példákat az

általad választottakra.
 A bal felső sarokban van egy keresődoboz. Gépeld be, hogy

"Merriweather".
 A keresődoboz alatt feltűnik az összes Merriweather betűtípus. Ezekből
válaszd ki az elsőt.
 Ezzel egy új oldalt nyitottál meg, ahol soronként láthatod a betűtípust az

összes betűvastagsággal, és dőlt típusokkal. Minden sor végén van egy
"Select this style" gomb, amellyel hozzáadhatod a kiválasztott
betűkészletekhez. Válaszd ki a "Light 300" típusút.
 Ha sikerült, akkor a jobb oldalon megnyilt egy oszlop. Itt fogod találni
általad kiválasztott összes betűtípust. Ha szeretnéd ezt az oszlopot
bezárni, akkor nyomj a jobb felső sarokban található kék dobozkára.
 Új betűtípus hozzáadásához nyomj a felső sorban található "Browse
fonts" gombra. Ezzel visszakerültél arra az oldalra, ahol a "Merriweather"
betűtípusra kerestél rá. Töröld ki a keresődobozból a "Merriweather"
szöveget, és keress rá az "Open Sans"-ra.
 Ebből most a "Regular 400" típust válaszd ki. Ha szeretnél több
betűvastagságot hozzádadni, vagy esetleg szeretnéd, hogy dőlt típusú is
legyen a betűkészletedben, akkor nyomj a jobb felső sarokban található
fekete dobozkára. Ez újra megnyitotta neked az oszlopot, ahol a
hozzáadott betűtípusok szerepelnek. Itt válaszd ki azt amelyiket
módosítanád, majd nyomj az "Add more styles" gombra.
 Jó gyakorlat, ha csak azokat a betűtípusokat hagyod kiválasztva,
amelyeket tényleg használsz, így csökkentheted a betöltés idejét.
 Kódba való beágyazáshoz, az oszlopban található első szürke dobozt
másold ki, majd illeszd be a kódot a JSBin head részébe a HTML-panelen
(rögtön a záró </head> tag elé):
<head>
[...]
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Merriweather:wght@300&family=Open+Sans&display=swap"
rel="stylesheet">
</head>
A fenti kód a link HTML-taget használja. Ezzel tudsz külső forrásokat a
projektedbe linkelni. Ebben az esetben a link forrása egy stíluslap, amely a
választott betűkészleteket tartalmazza. Amikor betöltődik az oldalad, a
böngésző betölti ezt a külső forrást a Google szerveréről, és így a betűk
elérhetővé válnak a kliens számára. Így használhatod a Merriweather és Open
Sans betűtípust akkor is, ha nincsenek telepítve a böngészőt futtató
számítógépen.
Megjegyzés: A link tagnek két attribútuma van. A href tárolja a linkelt forrás
elérési útvonalát, és a rel írja le annak kapcsolatát a HTML-dokumentummal.
+1 tipp: Ha már úgyis erre járunk, ne felejts el címet adni a weblapnak

a title tagek között.
Miért szükséges belinkelni a HTML-kódba egy betűtípusokat tartalmazó

külső stíluslapot?
Ha nem linkelsz be egy betűtípusokat tartalmazó külső stíluslapot, a
betűtípusok minden böngészőben másként fognak megjelenni az adott
böngésző beépített stíluslapjának beállításai szerint.
böngészők csak olyan betűtípusokat tudnak megjeleníteni, amelyek már
telepítve vannak a böngészésre használt számítógépen.
betűtípusok minden kijelzőn másként fognak megjelenni az adott kijelző
méretétől, elrendezésétől és felbontásától függően.
Ha nem linkelsz be egy betűtípusokat tartalmazó külső stíluslapot, néhány
böngésző csak nagyon lassan tudja majd betölteni a weboldalad.
3.4. Állítsd be a betűtípust

Most, hogy belinkeltük a betűket, végre foglalkozhatunk a tipográfiával.
Nyiss egy új szakaszt a CSS-panel alján az alapstílusok ("Base Styles") számára

egy megjegyzés segítségével, és másold oda a következő kódrészletet:
/* ==== BASE STYLES ==== */

body {
font-family: Merriweather, 'Times New Roman', serif;
}
h1,
h2 {
font-family: 'Open Sans', Arial, sans-serif;
}
Megjegyzés: A CSS rendszerezése megkönnyíti a későbbiekben a navigációt.
Megjegyzés: Ha más betűtípusokat választottál, írd be a nevüket a megfelelő

helyre.
Ha az Output-panelre pillantasz, láthatod, hogy a betűk megváltoztak a

kívánalmainknak megfelelően. Remek. De akkor miért kellett a választott
betűtípusok után még másik betűkészleteket is megadni?
Ezeket tartalék betűknek (fallback fonts) hívjuk. Ezek általában tartalmaznak

valamilyen webbiztos betűtípust (mint a Times New Roman vagy az Arial) és egy
általános betűtípust (mint a serif [talpas betű] és a sans-serif [nem talpas betű]),
amely arra vonatkozóan nyújt információt, hogy milyen típusú betűt szántunk
oda eredetileg. Ha a böngésző valamely okból nem tudná betölteni az első
betűkészletet, megpróbálkozik a másodikkal, ha azt sem, a harmadikkal, és így
tovább.
Megjegyzés: A fő betűtípus és a tartalék típusok együttese a font stack.
+1 tipp: Amikor megadod a font stack-et, az egyes családokat vesszővel válaszd

el (Arial, sans-serif), és tedd aposztrófok közé azokat, amelyeknek szóköz
van a nevében ('Open Sans').
Milyen CSS-tulajdonságot használnál ahhoz, hogy a honlapod szövege

Yanone Kaffeesatz betűtípussal jelenjen meg, úgy, hogy mellé néhány
tartalék betűtípust (fallback fontot) is megadsz?
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
font-family: Yanone Kaffeesatz; Arial; sans serif;
font-family: 'Yanone Kaffeesatz' Arial 'sans serif';
font-family: 'Yanone Kaffeesatz' Arial sans-serif;
Úgy bizony!
3.5. Még egy kis tipográfia

Itt az idő, hogy egy kicsit egyedül dolgozz. Állítsd be a következőket a CSS
segítségével:
1. Legyen a body betűmérete 18px.

2. Legyen a h1 címsorok betűmérete 28.8px.
3. Legyen a h2 címsorok betűmérete 25.6px.
4. A .main-header class p elemét célozva állítsd a betűméretet 18px-re.
5. Ugyanezen az elemen legyen a betűk közötti térköz 2px.
6. Legyen a body elemen belül a sormagasság 32px.
7. A body szövegének színe legyen #333.
8. A h2 címsoroké #e5127d.
9. A p elem színe a header elemben pedig legyen #8c8e9b.
Megjegyzés: A következő oldalon találsz egy lehetséges megoldást, de próbáld

meg megoldani magadtól a feladatot először, sosem árt egy kis gyakorlás.
Feladat:
Állítsd be a blog tipográfiai stílusát. Másold ide a bined URL-címét.
A megoldásod:
https://codepen.io/SziRom/pen/BarNxVZ
3.6. Egy lehetséges megoldás

Ha minden feladatot elvégeztél az előző lépésben, akkor egy ehhez hasonló
eredményt láthatsz a saját JSBinedben: egy lehetséges megoldás.
Gyönyörű tipográfia. Egy probléma van csak vele, hogy nem alkalmazkodik a
mérete a különböző képernyőméretekhez (nem skálázódik). Ezt javítjuk ki a
következő leckében.
Ott találkozunk! :)
Feladat:
Ha szükséges, javítsd ki a kódodat. Másold ide a bined URL-címét.
A megoldásod:
https://codepen.io/SziRom/pen/BarNxVZ
4.1. Az első pillér

Üdvözöllek a reszponzív webdesign első pillérénél: a relatív hosszmértékeknél.
Ebben a leckében a következőkről tanulhatsz:
 mik azok a hosszmértékek,

 mi a különbség az abszolút és relatív egységek között,
 hogyan teszik a munkánkat a relatív egységek hozzáférhetőbbé mindenki
számára,
 hogyan alkalmazhatod a relatív egységeket, hogy reszponzív és
hozzáférhető tipográfiájú oldalakat készíts, és
 hogyan használd a relatív egységeket, hogy reszponzív képeket kapj.
A végére gyönyörűen skálázódó képek és tipográfia vár majd a blogsablonodon.
Készen állsz? Csapjunk is bele!
4.2. A hossz egységei

Most még minden font-size tulajdonság pixelben van megadva a
blogsablonunkon. A pixel egy abszolút egység a hosszmértékek között, tehát
statikus, nem változik. Ugyanúgy néz ki, függetlenül az operációs rendszertől
vagy a használt böngészőtől. Ez akkor hasznos, ha valamit pixelpontosan kell
megadnod. Viszont a pixelekben megadott méretek egyes helyzetekben nem
könnyen hozzáférhetőek. Az abszolút egységekben megadott méretek nem
tudnak a különböző böngészési körülményeknek megfelelően módosulni,
azokhoz adaptálódni (ez azt is jelentheti, hogy bizonyos körülmények között az
oldalad használhatatlan lesz).
Rendben, de mi a csuda ez a hosszmértékegység-dolog?
Ahhoz, hogy a hosszmérték egységeit megértsd, először nézzük meg

alaposabban a hossz értékének lehetséges típusait.
Emlékezz a CSS-szabályok felépítésére:

selector {
property: value;
}
A value részre többféle, különböző típusú érték kerülhet, ezek egyike a hossz. A
hossz értéktípus jelöli a távolság méreteit. Egy számból és egy (hossz)egységből
áll, amelyek között nincs szóköz. Például ebben a CSS-szabályban:
p {
font-size: 16px;
}
A font-size tulajdonságnak egy hosszértéket adtunk meg, amely egy számból

(16) és egy egységből (px) áll. Más szavakkal a hosszmérték egységei egyszerűen
azok az egységek, amelyeket a hosszak értéktípusaként megadhatunk.
Léteznek abszolút hosszmértékegységek (mint a pixel) és relatív egységek (mint

az em, rem, vw és a vh). A relatív egységek remek eszközök abban az esetben,
ha skálázódó tipográfiát, médiát vagy reszponzív elrendezéseket szeretnél
létrehozni, mert a konkrét méreteket a böngésző számolja ki a megjelenítés
közben. A következő feladatokban egyesével végigvesszük a leggyakrabban
használt relatív hosszmértékegységeket, és átalakítjuk ennek segítségével az
oldal tipografikus megjelenését.
Az alábbiak közül melyik abszolút hosszmértékegység?
em
rem
px
vw
Helyes válasz. Piros pont jár érte!
4.3. Em
Az első relatív hosszmértékegység, amelyet alaposabban megvizsgálunk, az em.
Az em érték a valós megjelenítési méretét a szülő eleméhez viszonyítva kapja:
1em egyenlő a szülő elemben beállított font-size méretével. Ha az oldalon belül
semminek nem adtál meg betűméretet, akkor az 1em a böngésző
alapbeállításának megfelelő méretet veszi alapul (ami leggyakrabban 16px).
Mindez könnyebben megérthetővé válik a következő példa segítségével:
<body>
<h1>A Heading</h1>
<p>A paragraph.</p>
</body>
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
Mivel mind a h1, mind a p a body elem gyermekei, így a böngésző ennek a 16
pixeles betűméretét veszi alapul, amikor kiszámolja a méreteiket. Ebben az
esetben 1em (a bekezdés betűmérete) 16px lesz, a 2em (a címsor betűmérete)
pedig 32px.
Máris könnyebben érthető, hogyan oldhatja meg ez a módszer a

hozzáférhetőséggel kapcsolatos problémánkat. Ha em egységeket használsz, a
böngésző az oldal megjelenítéséhez különböző betűméreteket vehet alapul, és
az oldal teljes szerkezete ehhez a mérethez képes adaptálódni.
Van azonban egy kis bökkenő az em egységgel; a hatása halmozódik. Például:
<body>
<p>A paragraph with a <span>span in it.</span></p>
</body>
body {
font-size: 10px;
}
p {
font-size: 2em;
}
span {
font-size: 1.5em;
}
A példában a span elem a p gyermeke. A böngészőben a következő játszódik le:

"Nos, a body betűmérete 10px. A p 2em és a body gyermeke, így a mérete
2*10px = 20px. A span pedig 1.5em és a p gyermeke, amely most 20px, így
a span mérete 1.5*20px = 30px."
Látod, milyen hamar elszabadult az egész?
Szerencsére erre is van megoldás, ezt nézzük meg a következő feladatban. De

előbb jöjjön egy kérdés.
Ha a <body> betűmérete 16px, mekkora lesz a 4em betűméretű gyermek

eleme pixelekben megadva?
4px
8px
48px
64px
Nagyon vágod a témát! Igen, ez a jó válasz.
4.4. Rem
A rem egységet pont azért vezették be a CSS-ben, hogy az em halmozódó
hatásának problémájára jelentsen megoldást. A rem egység pontosan úgy
működik, mint az em, egyetlen fontos különbséggel: a mérete alapja a "gyökér"
elem (root element, a html elem) betűmérete, nem pedig a szülő elemé.
Ez kiküszöböli az összeadódó hatás okozta fejtörést, de megmarad minden, ami

az em egységben jó: relatív és skálázható.
+1 tipp: Ha nem adsz meg specifikus méretet, a html betűmérete a legtöbb
böngészőben alaphelyzetben 16px.
Talán azon töröd épp a fejed, hogy mit használj, em vagy rem egységet. Bár az
em egységnek van pár nagyon specifikus felhasználási területe, az em
halmozódó hatása miatt mégis azt javaslom, eleinte használd inkább a rem
egységet. A remet sokkal egyszerűbb kezelni, emellett az em összes előnyével
rendelkezik.
Megjegyzés: A rem a root em (gyökér em) rövidítése.
Ha a <html> betűmérete 16px, és a <body> betűmérete 0.5rem, pixelekben

megadva mekkora lesz a <body> elem gyermeke, amelynek
betűmérete 2em?
6.4px
16px
32px
160px
Abszolút így van. Gratulálunk!
4.5. Tipográfia és a rem

Itt az ideje, hogy az újonnan szerzett tudást kamatoztathasd. Konvertáljuk a
betűméreteket pixelekből rem egységekké.
Ethan Marcotte alkotott egy formulát, amelynek segítségével minden ilyen

átalakítás szuperkönnyű:
target ÷ context = result
Ahol:
 A "target" (cél) a kívánt célméret, pixelekben megadva.

 A "context" (kontextus) az a méret, pixelekben megadva, amely a relatív
egység alapját fogja képezni.
 A "result" (eredmény) egy hányados, rem egységekben megadva.
Alkalmazzuk a formulát a blogsablonunk konkrét példáján. A body betűmérete
18px. Ez lesz a cél (target). A méret, amelyet szeretnénk végül rem egységekben
megadni. Tudjuk, hogy a rem egységek a gyökér elem (html) betűméretét
használják viszonyítási egységként. Azt is tudjuk, hogy a böngészőkben ez
alapesetben 16px. Ez lesz a kontextus (context). Már csak el kell osztanunk a
kettőt egymással, és megkapjuk az eredményt (result), rem egységekben
megadva:

18px ÷ 16px = 1.125rem
Ilyen egyszerű. Rajtad a sor, cseréld ki a pixelértékeket rem egységekre.

Láthatod közben, hogy a felszínen – látszólag – semmi nem változott. Azonban a
szöveg betűmérete most már a html elem betűméretéhez képest könnyen tud
módosulni. Ettől lesz a weboldal könnyebben hozzáférhető.
+1 tipp: Ez a formula nem csak a tipográfia és rem egységek viszonylatában

értelmezhető. Segítségével bármelyik statikus értéket átalakíthatjuk relatívvá,
így ez a reszponzív webdesign egyik alapeszköze. További példákat találhatsz az
alkalmazására a Reszponzív elrendezés leckében.
+1 tipp: A formulához hasonlóan az em és rem egységek sem csak a

tipográfiában használatosak. Segítségükkel megadhatunk margókat,
térközöket, bármilyen méretet. Erre is bőven láthatsz majd példát az
elrendezésekkel foglalkozó leckében.
Feladat:
Használd a formulát, és cserélj minden px értéket rem-re a Base Styles

(Alapstílusok) részben. Másold ide a bined URL-címét.
A megoldásod:
https://codepen.io/SziRom/pen/rNdVKBE
4.6. Százalékok
Ha megoldottad az előző feladatot, a CSS-ed ehhez hasonlóan alakult:
/* ==== BASE STYLES ==== */

body {
font-size: 1.125rem;
line-height: 2rem;
color: #333;
}
h1,
h2 {
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
color: #e5127d;
}
.main-header p {
letter-spacing: 0.125rem;
color: #8c8e9b;
}
Ha így történt, gratulálunk. Az oldalad tipográfiája teljesen reszponzív,

skálázható és hozzáférhető.
A képek az oldalon azonban még mindig statikusak. Láthatod, ahogy kinyúlnak a

saját kis konténereikből az Output-panelen. Úgy néz ki, mintha le lennének
vágva, és csak oldalra görgetve láthatod, hogy valójában túl nagyok. Ez nem
igazán reszponzív, és nem is kívánatos. Azért történik ez a képekkel, mert a
szélességük 800px, és nem tudnak egy ennél kisebb konténerhez adaptálódni.
Javítsunk ezen az állapoton egy másik relatív egységgel, a százalékkal

(percentage).
Megjegyzés: Direkt nem használtam a hosszegység kifejezést. A CSS-ben
használhatod a százalékot hosszméretek megadására, de a százalék maga nem
egy hosszmértékegység.
Hogyan működik a százalék?
Egy érték, amely százalékban van megadva, a tartalmazó elem méreteit veszi
alapul. Például ezekben a HTML- és CSS-kódrészletekben:
<div class="big-box">
<div class="little-box"></div>
</div>
.big-box {
width: 500px;
}
.little-box {
width: 50%;
}
A little-box szélessége 250px lesz, mert az azt tartalmazó big-box 500px

széles.
Láthatod, hogy a százalékok segítségével kényelmesen leírható egyes

elemek más elemekhez viszonyított mérete. Ez kifejezetten hasznos lesz, amikor
reszponzív elrendezéseket építünk.
4.6. Százalékok
Ha megoldottad az előző feladatot, a CSS-ed ehhez hasonlóan alakult:
/* ==== BASE STYLES ==== */
body {
line-height: 2rem;
color: #333;
}
h1,
h2 {
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
color: #e5127d;
}
.main-header p {
letter-spacing: 0.125rem;
color: #8c8e9b;
}
Ha így történt, gratulálunk. Az oldalad tipográfiája teljesen reszponzív,

skálázható és hozzáférhető.
A képek az oldalon azonban még mindig statikusak. Láthatod, ahogy kinyúlnak a

saját kis konténereikből az Output-panelen. Úgy néz ki, mintha le lennének
vágva, és csak oldalra görgetve láthatod, hogy valójában túl nagyok. Ez nem
igazán reszponzív, és nem is kívánatos. Azért történik ez a képekkel, mert a
szélességük 800px, és nem tudnak egy ennél kisebb konténerhez adaptálódni.
Javítsunk ezen az állapoton egy másik relatív egységgel, a százalékkal

(percentage).
Megjegyzés: Direkt nem használtam a hosszegység kifejezést. A CSS-ben
használhatod a százalékot hosszméretek megadására, de a százalék maga nem
egy hosszmértékegység.
Hogyan működik a százalék?
Egy érték, amely százalékban van megadva, a tartalmazó elem méreteit veszi
alapul. Például ezekben a HTML- és CSS-kódrészletekben:
<div class="big-box">
<div class="little-box"></div>
</div>
.big-box {
width: 500px;
}
.little-box {
width: 50%;
}
A little-box szélessége 250px lesz, mert az azt tartalmazó big-box 500px széles.
Láthatod, hogy a százalékok segítségével kényelmesen leírható egyes

elemek más elemekhez viszonyított mérete. Ez kifejezetten hasznos lesz, amikor
reszponzív elrendezéseket építünk.
Oldd meg a képek problémáját
De térjünk vissza az eredeti, képekkel kapcsolatos problémához. A képek 800px

szélesek. Ehelyett viszont szeretnénk, ha kitöltenék a rendelkezésükre álló
szélességet, jelen esetben a képeket tartalmazó article elem szélességét.
A megoldás kézenfekvő: ha a képek szélességét 100%-ra állítod, mindig

pontosan akkorák lesznek, mint az azokat tartalmazó konténer mérete. Adj
egy picture classt minden img elemnek a HTML-ben, és aztán bővítsd ki a CSS-t:
.picture {
width: 100%;
}
Voilá, a képek reszponzívak. Próbáld meg változtatni a böngészőablakod

méretét, hogy lásd az eredményt.
Megjegyzés: Ez az utolsó rész egy kis átfedés két nagy pillér, a relatív egységek
és a reszponzív média között. Ez utóbbival a kapcsolódó leckében
részletesebben is foglalkozunk majd.
Adottak a következő
elemek: <html><body><div><img></div></body></html>.
A <html> betűmérete 16px, a <body> betűmérete 2rem,
a <div> betűmérete 1.5em, és a <div> szélessége 3.75rem.
Milyen width értéket kell beállítanod az <img> elemnek, hogy 60 pixel
széles legyen?
3.75em
1.25rem
100%
125%
Watson, Önnek teljesen igaza van!
4.7. A viewport szélessége és magassága

Mielőtt a lecke végére érnénk, még két relatív hosszmértékegységet mutatok
neked, a vw (viewport width – viewport szélessége) és a vh (viewport height –
viewport magassága) egységeket. Ezek az egységek még egészen újak, a CSS3-
ban mutatkoztak be először. Bár még nem minden böngésző támogatja a
használatukat, már az esetek nagyon nagy százalékában semmi problémát nem
okoznak, és így remek eszközök, ha reszponzív elrendezéseket szeretnél építeni.
A vw - viewport szélessége
1vw a viewport szélességének századrésze. Más szavakkal a viewport

szélességének 1%-a.
Megjegyzés: Emlékezz, a viewport csak egy trendi név a böngészőablakra.
A vw egység hasonlít a százalékra, csak a böngészőablak méreteit és nem a

konténer elem méreteit veszi alapul. Ez például remekül használható, ha az
elrendezés főbb egységeit (header, navbar, aside...) szeretnéd méretezni.
Add hozzá a kódodhoz a következő CSS-részletet, és figyeld meg, mi történik:
main {
width: 50vw;
}
Most próbáld meg átméretezni az Output-panelt, hogy működés közben is

láthasd az eredményt. Szuper, nem?
A vh - viewport magassága
1vh a viewport magasságának századrésze, azaz 1%-a.
Ez az egység a viewport magasságát veszi alapul, ezen kivételtől eltekintve

tökéletesen azonos a működése a vw egység működésével.
Most add hozzá a kódodhoz a következő szabályt is:
header {
height: 25vh;
}
Ha átméretezed az Output-panelt, láthatod működés közben.
+1 tipp: Ha végeztél a kísérletezéssel, ezt a legutoljára hozzáadott két CSS-

részletet töröld ki a JSBinből.
Pro tipp: Amikor a webfejlesztés során viszonylag új dolgokat használsz,

érdemes ellenőrizni a támogatottságukat a caniuse.com segítségével. Ezen az
oldalon megtalálod minden CSS-tulajdonság, -érték és -egység esetén azt, hogy
az egyes böngészőkben használhatóak-e. Ha bármikor kétséged támad
valamivel kapcsolatban, csak keress rá.
Adottak a következő elemek: <article><div><p></p></div></article>.

Az <article> szélessége 95%, és a <div> szélessége 100%.
Milyen width értéket kell megadnod a <p> elemnek, hogy olyan széles
legyen, mint a böngésző ablakának aktuális szélessége?
100%
100vh
1vw
100vw
4.8. Összefoglaló a relatív egységekről

Ezzel vége is ennek a leckének. Most már ismered a legfőbb relatív egységeket
(em, rem, százalék és az új viewport egységek), és már azt is megtanultad,
hogyan használd ezeket, ha skálázható, hozzáférhető tipográfiát és reszponzív
képeket szeretnél látni a weboldaladon.
Azonban nem ez az utolsó eset, hogy ezekről az egységekről hallasz. Hamarosan

visszatérnek (már a következő leckében is), hogy segítségükkel megépíthesd az
első, teljesen reszponzív weblapodat.
+1 tipp: Bár sok egységgel foglalkoztunk most, még mindig van pár eddig nem
említett – és igen ritkán alkalmazott – egység a CSS-ben. Ha érdekel, olvashatsz
az összesről ezen a linken.
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Units
5.1. A második pillér
A reszponzív webdesign második pillére a reszponzív elrendezés.
Mostanra már több statikus elrendezésű honlapot építettél, és többször

belebotlottál a legfőbb hátrányukba: ha nincs elég hely, "eltörnek". A reszponzív
elrendezések úgy segítenek ezen a problémán, hogy az egyes elemek méretét
dinamikusan, valamely másik elem méretéhez viszonyítva számolják.
Megjegyzés: A reszponzív design egyik nagy előnye a specifikus mobiloldalakkal
szemben pontosan az, hogy ez a számolás dinamikusan és folyamatosan
történik, párhuzamosan a megjelenítéssel. Egy jól megépített reszponzív weblap
nemcsak a mobileszközökön mutat jól, hanem az asztali gép mérete és a
mobilok mérete között is.
Ebben a leckében azt tanulod meg, hogyan építs ilyen elrendezésű weblapokat,
és közben a következő készségekre teszel szert:
 az elrendezés elemeinek méretezése relatív hosszmértékegységek

segítségével,
 a "meta viewport tag" beállítása, hogy a weblap tényleg reszponzív
legyen, illetve
 az "elsőként mobilra" (mobile first) elv használata a weboldalak tervezése
során.
A lecke végére tudni fogod, hogyan alakíts bármilyen statikus elrendezést

reszponzívvá, és közben a példa blogsablon mobilnézetével is elkészülsz.
Ha készen állsz, csak nyomd meg a "Tovább" gombot, és már kezdjük is.
+1 tipp: Ha a pozicionálás még ismeretlen terület számodra, ajánljuk, hogy

végezd el az ezzel kapcsolatos projektünket először.
5.2. Példa a reszponzív elrendezésre

A legegyszerűbben úgy érthető meg a reszponzív elrendezés, ha építünk egyet.
Úgyhogy tegyük is félre a blogsablonunkat egy kis időre, és építsünk egy
reszponzív elrendezést. Csak egy pár relatív egységre és a target ÷ context =
result formulára lesz szükségünk, ezeket pedig már mind jól ismered.
Meg persze egy statikus elrendezésre. Íme egy példa:
<div class="container">
<aside>...</aside>
<section>...</section>
</div>
aside,
section {
margin-right: 15px;
}
.container {
width: 1368px;
height: 400px;
padding: 15px;
}
aside {
width: 456px;
height: 400px;
float: left;
}
section {
width: 456px;
height: 400px;
float: left;
}
Ez a nagyon egyszerű weblap egy konténerből áll, amely két elemet tartalmaz,
egy aside és egy section elemet. Nyisd meg az alábbi JSBint, hogy élőben
lásd: Példa a statikus elrendezésre.
Ha megpróbálod átméretezni az Output-részt, láthatod, hogy az elemek

szélessége fix. Ha a böngésző ablaka kisebb lesz, mint a konténer mérete, az
oldal egy része egyszerűen túlnyúlik az ablakon. Alakítsunk át minden abszolút
egységet relatívvá a CSS-ben.
+1 tipp: Lemásolhatod ezt a bint, és követheted, ami történik, ha a "File →

Clone" menüpontra kattintasz.
A varázsformula
Ahhoz, hogy egy elem relatív értékét meghatározd, a következő lépések

szükségesek:
1. Határozd meg az elem statikus méretét (célérték – target).
2. Határozd meg, hogy melyik elem lesz a viszonyítási alap (kontextus –
context), és találd meg a méretének statikus értékét.
3. Alkalmazd a formulát.
4. Az aktuális helyzetnek megfelelően döntsd el, hogy éppen melyik relatív
egységre van szükséged.
Kezdjük a példánk egyszerűbb részével. Alakítsuk át az aside és

a section elemeket. Mindkettő viszonyítási alapja (context) a .container. Az
értékeket behelyettesítve:
A szélességek átalakítása:

456px ÷ 1368px = 0.3333
A magasságok átalakítása:

400px ÷ 400px = 1
Ahogy az előző leckében láthattad, a százalék kitűnő abban az esetben, ha a

méretet egy másik elem méretéhez viszonyítva szeretnéd megadni. Mivel
szeretnénk, ha az aside és a section a .container méreteihez arányosan
méreteződne, válasszuk a százalék értéket. Így a
kapott 0.3333 érték 33.33% lesz, és a kapott 1 pedig 100%.
aside {
width: 33.3%;
height: 100%;
float: left;
}
section {
width: 33.3%;
height: 100%;
float: left;
}
A weblapon azonban semmi nem változott, még mindig statikus, hiszen a

méretek alapját adó konténer még mindig abszolút egységekkel van méretezve.
Állítsuk át ezt is.
A konténer átalakítása
Itt már egy trükkösebb kérdéssel találkozunk: mi lehet a konténer kontextusa? A

szélesség és magasság tekintetében ez most a szülő elem, a body, amely kitölti a
teljes viewportot. De mi a viewport statikus mérete? Az én számítógépemen, egy
teljes képernyőt kitöltő böngészőablak szélessége 1440px. A te számítógépeden
valószínűleg ez az érték teljesen más. Akkor most hogyan tovább?
Az a trükk, hogy ezt a kérdést nem kell megválaszolnod. Ha egy designerrel

dolgozol együtt, ő majd megadja pontosan, milyen felbontású képernyőn
dolgozott. Ha egyedül dolgozol, ezt magad is kiderítheted. Például én ezt a kis
bemutató oldalt egy 1440px széles és 798px magas képernyőre terveztem.
Ezeket a méreteket fogom használni a viewport statikus méreteinek.
Ennek tudatában már nagyon egyszerű átváltani a számokat: 1368/1440 = 0.95 a

szélességre és 400/798 = 0.5013 a magasságra. Mivel a .container elemet a
viewporthoz viszonyítva szeretnénk méretezni, használjuk a vw és vh
egységeket, hogy megkapjuk a reszponzív méreteket:
.container {
width: 95vw;
height: 50.13vh;
padding: 15px;
}
És tessék, a weblap majdnem teljesen reszponzív. Ha most megpróbálod

átméretezni az ablakot, azért még mindig láthatod, hogy ha az túl keskeny,
bizonyos részek kilógnak belőle. Ezt az okozza, hogy még mindig van két
statikus elem a kódban: a beágyazott elemek margója, és a .container elemre
megadott térköz (padding).
Végső simítások
Mind az aside, mind a section jobb oldali margója 15px. A kontextus, amelyhez
képest méretezni szeretnénk ezeket, a konténer. Így a formula a
következőképpen alakul: 15/1368 = 0.01096. Ez újra a százalék terepe:
aside,
section {
margin-right: 1.096%;
}
De mi a helyzet a térközzel a .container elemen? Ebben az esetben a cél

(target) maga a térköz (a terület a tartalom és a border [keret] között). Mivel ez
még az elemen belül található, ezért a kontextus maga az elem. A formulát
alkalmazva:
.container {
width: 95vw;
height: 50.13vh;
padding: 1.096%;
}
Ha megnézed ezt a JSBin-linket – Példa a reszponzív elrendezésre –, és

megpróbálod átméretezni az Output-panelt, láthatod, hogy már az oldal egésze
reszponzív; bármilyen keskeny is az ablak, semmi nem lóg ki.
Ha eddig követtél minden lépést, gratulálunk – elkészítetted életed első, teljesen

reszponzív weboldalát. :)
5.3. A mobile first elv

Az okostelefonok és egyre gyorsabb mobilinternet-kapcsolatok elterjedésével a
weboldalak mobilnézetének tervezése már nem csak egy lehetőség, sokkal
inkább abszolút szükséglet. A mobileszközök térnyerésével egy újfajta tervezési
stratégia született: a mobile first (elsőként mobilra) megközelítés.
Az alapelve a következő: elsőként építsd meg az alapélményt a lehető legkisebb

méretű kijelzőre, ezután bővítsd extra elemekkel és kiegészítő funkciókkal,
ahogy a rendelkezésre álló képernyőméret növekszik. Ezt illetik
még progressive enhancement ("lépcsőzetes fokozás") névvel.
Megjegyzés: A graceful degradation ("kecses lefokozás") a progressive
enhancement pontos ellentéte. Ez esetben először a legnagyobb képernyőt
alapul véve készül el a teljes funkcionalitás, és ezt az élményt szabják
fokozatosan kisebb képernyőkre a különböző extrák elvételével. A megközelítés
általában nem jár a mobilfelhasználók osztatlan elégedettségével (az együtt
tervezett alapvető és kiegészítő funkcionalitás egy olyan szoros egyveleget
képez, amelyet különösen nehéz egyszerűsíteni).
A CodeBerryben erősen pártoljuk a mobile first megközelítést, és azt javasoljuk,

hogy te is ezzel a filozófiával építsd a projektjeidet. Ennek megfelelően elsőként
a blogsablonunk mobilnézetét fogjuk rendbe szedni. Ha azzal minden rendben,
csak akkor lépünk tovább a táblagépek és asztali gépek irányába.
Előtte azonban egy gyors feladat.
Mi lehet a graceful degradation („kecses lefokozás”) egyik hátránya?

Semmi, egyértelműen sokkal jobb megközelítés, mint a progressive
enhancement („lépcsőzetes fokozás”).
Rossz felhasználói élményhez vezethet mobilos felületen.
Általában nagyobb képernyőkön rettentő ronda kinézetű weboldalakhoz
vezet.
Minden képernyőméreten a funkciók csökkenésével jár.
5.4. Építsd a blogot – Box-sizing méretezés

Korábbról már ismerős lehet: minden weblapépítés első (biztonságos és okos)
lépése, ha megkönnyíted a dolgod, és beállítod a border-box értéket a box-
sizing tulajdonságra.
Tovább építjük tehát a blogsablont. Nyisd meg a blog kódját tartalmazó binedet,
és illeszd be a következő CSS-szabályt az alapstílusaid legtetejére:
* {
box-sizing: border-box;
}
A * általános szelektor és a border-box érték már ismerősek korábbi
projektekből. Mostantól minden szélesség- és magasságtulajdonság magába
foglalja a tartalmat, a térközt és a keretet (content, padding, border), a margót
viszont nem.
Ha a box-sizing tulajdonság értékét border-box-ra állítod, mi fog

beletartozni a width és a height tulajdonságok értékébe?
A tartalom, a belső térköz és a keret.
A tartalom, a belső térköz és a margó.
A tartalom, a margó és a keret.
A margó, a belső térköz és a keret.
Igen, igen, és megint csak igen. Ez a helyes válasz!
5.5. Építsd a blogot – A header

Ha az alábbi tervre (mock-up) tekintesz, láthatod, hogy a header rész a viewport
teljes szélességét elfoglalja, a tartalma középre rendezett, és minden oldalról
van rajta térköz. Alakítsuk mindezt kóddá.
Navigálj a CSS-panel aljára, és nyiss egy új részt, /* ==== LAYOUT STYLES ====
*/ (az elrendezés stílusai) címsorral. Közvetlenül alatta célozd meg a .main-
header részt a következő szabályokkal:
.main-header {
text-align: center;
padding: 1.25rem;
}
Nézd csak! Egy szép, teljes szélességű, középre rendezett fejléc.
+1 tipp: Emlékezz, a width tulajdonságot nem kell megadnod, mert a header egy
blokkszintű (block level) elem. A blokk szintű elemek mindig kitöltik a
konténerük teljes, rendelkezésre álló szélességét (a szélességük
alapértelmezetten 100%).
Feladat:
Állítsd be a header text-align és padding tulajdonságait. Másold ide a bined
URL-címét.
A megoldásod:
https://codepen.io/SziRom/full/VwXeVLW
5.6. Építsd a blogot – A tartalom

A fő tartalmi egységünk jelen pillanatban még faltól falig tart. Szeretnénk, ha
lenne egy lélegzetvételnyi térköz körülötte. Javítsunk most ezen.
Navigálj a "Layout Styles" (elrendezéssel kapcsolatos stílusok) részre, és célozd

meg a .post classt. Add hozzá az alábbi szabályokat:
.post {
width: 95%;
margin: 1.25rem auto;
padding: 0.3125rem;
}
A .post classt mindegyik article elemhez hozzáadtuk. A szülő elemük

a .primary-content konténer, amely a blokkszintű (block level) elem (alapból
teljes szélességgel). Ha a gyermekeinek 95%-os szélességet állítunk be, és
azokat középre rendezzük, mindkét oldalon lesz egy kis szabadon maradó rész.
A felső és alsó margó vertikálisan választja egy kicsit szét a bejegyzéseket.
Máris jobb. Ha már úgyis itt járunk, rendezzük újra egy kicsit a CSS-
szabályainkat:
 Rögtön a "Layout Styles" (elrendezéssel kapcsolatos stílusok) rész fölött
találod azt a szabályt, amely a képeket reszponzívvá teszi. Mivel ez
logikailag egy elrendezéssel kapcsolatos szabály, mozgasd át arra a
részre.
 Célszerű még néhány alcímet is hozzáadni tagolásként ehhez a részhez,
hogy végeredményként valami ilyesmit kapj:
/* ==== LAYOUT STYLES ==== */
/* Main Header Styles */

.main-header {
text-align: center;
padding: 1.25rem;
}
/* Article Styles */
.post {
width: 95%;
margin: 1.25rem auto;
padding: 0.3125rem;
}
.picture {
width: 100%;
}
Remek, mindjárt készen is vagyunk.
+1 tipp: Talán elsőre ez a sok szöszmötölés a CSS rendezgetésével fölöslegesnek

tűnhet, de a kódod méretének növekedésével hamar hasznodra válik. A kódod
érthetőségére, olvashatóságára a kód írása során folyamatosan érdemes egy
pici plusz energiát fordítani. Rengeteg fejfájást spórol ez az apró jó szokás a
későbbiekben, amikor bonyolultabbá válik a CSS-ed.
Feladat
Formázd meg a tartalmat a fenti lépéseket követve. Másold ide a bined URL-
címét.
A megoldásod:
https://codepen.io/SziRom/pen/MWVKzJW
img,
.main-header, .primary-content
5.7. Építsd a blogot – Vertikális ritmus

A mobilnézetünk még mindig egy kicsit zsúfolt. Nincs elég hely vertikálisan az
elemek között, más szavakkal az oldalunk vertikális ritmusa még nem elég
szemet gyönyörködtető.
Ezen változtassunk pár margóval. Akár hozzá is adhatnánk minden elemhez

egyesével, de szeretnénk DRY (don't repeat yourself, azaz ne ismételd magad)
CSS-kódot írni. Ennek érdekében inkább egy helyen adjuk meg a margót, így
könnyen változtathatunk rajta később.
Most kipróbálunk egy dolgot, ami elsőre túl technikainak hangozhat, de

egyszerű megérteni. Az angol neve single-direction margin declaration, azaz
egyirányú margómegadás. Add hozzá a következő szabályt a CSS-hez,
közvetlenül a "Layout Styles" címsor alá:
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr {
margin-bottom: 1rem;
}
Megjegyzés: Ezt a technikát Harry Roberts jegyzi. Blokkszintű elemeknek ad

1rem alsó margót, így az oldalon egy lépés segítségével egységessé válik a
vertikális ritmus. A rem egység miatt pedig még adaptálódni is tud ez a méret,
ha változna az alapegység.
A fenti kódrészlet Roberts eredeti kódja. Pár általunk az oldalon használt,

blokkszintű elem azonban hiányzik belőle, így egy picit módosítanunk kell rajta.
Add hozzá a két fő blokkot, a headert és a tartalmat magába foglaló részt:
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr,
img,
.main-header, .primary-content {
margin-bottom: 1rem;
}
Már majdnem teljesen jó. Csak a .post-ra vonatkozó margin értékét kell
módosítanunk, hogy ne írja felül a korábban megadott 1rem értéket:
.post {
width: 95%;
margin: 0 auto 1rem;
padding: 0.3125rem;
}
Megjegyzés: Ha három értéket adsz meg a margónak (margin: 0 auto 1rem;),

azok a következő sorrendben szabályozzák az egyes oldali margókat: top, right
(and left) és bottom.
Tessék, egységes vertikális ritmus, egy elegáns lépésben.
Megjegyzés: Ez persze csak egy a tucatnyi lehetséges technika közül. Válassz

másik megoldást, ha szeretnél.
+1 tipp: Az eredeti kódban van néhány szelektor, amelyet ebben a projektben

nem használunk. Azért hagytuk benne mégis, hogy az eszközt teljes egészében
láthasd. Ha a jövőben bármikor szeretnéd alkalmazni ezt a technikát, nyugodtan
módosítsd az éppen aktuális igényeidnek megfelelően. Ugyanez igaz a CSS
reset-re is. Mindkettő csak kiindulási alap, amelyet minden egyes munkádhoz
hozzá kell igazítanod.
Hogyan tudsz létrehozni egy egységes vertikális ritmust egyirányú
margómegadással?
Az oldalon levő minden blokkszintű elem bal margójának ugyanazt az

értéket adod meg.
Az oldalon levő minden blokkszintű elem bal és jobb margójának ugyanazt
az értéket adod meg.
Az oldalon levő minden blokkszintű elem alsó margójának ugyanazt az
értéket adod meg.
Az oldalon levő minden blokkszintű elem felső és alsó margójának ugyanazt
az értéket adod meg.
Megy ez neked, ott a pont!
5.9. Összefoglalás a reszponzív elrendezésekhez

Gratulálok! Sikerrel elsajátítottad a reszponzív webdesign második lépcsőjét – a
reszponzív elrendezést. Ebben a leckében megtanultad:
 hogyan alakíts ki elrendezéseket relatív egységek segítségével,

 mik a flexibilis elrendezések előnyei,
 mi is az a mobile first (elsőként mobilra) elv,
és elkészült a blogsablonod mobilnézete is.
Ízlelgesd egy kicsit ez utóbbit most. Nyisd meg a JSBinben a munkád "Live
Preview" nézetét (egy pici nyíl az Output-panel jobb felső sarkában). Amint
betöltött az oldal, nyomd meg az F12 billentyűt Windowson vagy Linuxon, illetve
a Cmd + Option + I billentyűkombinációt Macen, hogy előhozd a Chrome
Developer Tools-t.
A panel tetején láthatsz két kicsi ikont. Kattints a másodikra (ha rámutatsz
egérrel, a "Toggle device toolbar" felirat látszik). Üdvözöllek az
eszközemulátorban (device emulator). Az ablak tetején választhatsz egy csomó
eszköz közül, ha a kis nyílra kattintasz. A Chrome képes megmutatni, hogyan
mutatna a weboldalad ezeknek az eszközöknek a képernyőjén.
Próbáld ki, hogy mutatna a blogsablonod egy iPhone, egy Galaxy vagy egy
Nexus képernyőjén.
Ha a három pontra kattintasz a képernyő szélén, még azt is kiválaszthatod, hogy
látszódjon az eszköz kerete. Igencsak menő funkció, próbáld ki. :)
Ahogy a különböző mobileszközök között kapcsolgatsz, láthatod, hogyan

alkalmazkodik a design minden különböző felbontáshoz, köszönhetően a
reszponzív elrendezésünknek. Ha viszont táblagépen vagy asztali számítógépen
nézed az oldalt, a dolgok elkezdenek szétesni. Az egyoszlopos mobilnézetünk
nem igazán adaptálódik jól a nagyobb képernyőkhöz.
Ha csak a reszponzív elrendezést alkalmazod, mindig beleütközöl ebbe az

akadályba. Egy bizonyos ponton túl már magát az elrendezést kell
megváltoztatnod, az átméretezés önmagában nem elegendő. Itt lépnek színre
a media query-k. Ez lesz a következő lecke témája.
Megjegyzés: Ha valahol a lecke során elvesztetted a fonalat, ebben a

binben megtalálod a kódot a jelen állapotában.
Hogyan tudod megnyitni az eszközemulátort a Chrome-ban, amely

megmutatja, hogy miként nézne ki az oldalad különböző képernyőkön?
A Ctrl + Shift + N (Macen a Cmd + Shift + N) megnyomásával.
A Chrome fejlesztői eszközeiben megnyitod az „Application” (Alkalmazás) panelt.
A Chrome fejlesztői eszközeiben rákattintasz az első ikonra („Select an element in the
page to inspect it” – azaz „Válaszd ki az oldal egy elemét vizsgálatra”).
A Chrome fejlesztői eszközeiben rákattintasz a második ikonra („Toggle device toolbar”).
Úgy bizony!
6.1. A harmadik pillér
Ebben a leckében a reszponzív design harmadik pillérével, a media query-kkel
("médialekérdezések") ismerkedhetsz meg.
A media queryk teszik lehetővé, hogy lényegesen különböző elrendezéseket

jeleníts meg a különböző képernyőméreteken anélkül, hogy egy teljesen
különálló kódbázist kelljen létrehoznod. A meglévő kódblokkokat rendezheted
át a segítségükkel, megjeleníthetsz vagy elrejthetsz tartalmi egységeket vagy
funkciókat. Így működnek:
[... valahol a CSS-fájlban ...]

@media (ha ez a feltétel igaz) {
érvényesüljenek ezek a szabályok
}
Ha a CSS-kódodba illesztesz egy @media szabályt, a böngésző a megjelenítéskor

ellenőrizni fogja, hogy a hozzá tartozó feltétel teljesül-e. Ha igen, a böngésző
érvényesíteni fogja a blokkon belül megadott szabályokat. Így adhatsz meg
olyan CSS-szabályokat, amelyek csak bizonyos képernyőtípusokon,
felbontásokon (resolution) vagy tájolásokon (orientation) érvényesülnek. A CSS
kaszkádoló (rangsoroló - cascading) természete miatt, ha ezeket
a @media szabályokat az alapstílusaid után helyezed el a kódban, azokat felülírva
új elrendezéseket hozhatsz létre.
Lássunk egy egyszerű példát. Nyisd meg ezt a bint.
Emlékezhetsz erre az oldalra az előző leckéből. Amikor legutóbb megpróbáltad

átméretezni, az elrendezés maga szépen változott az ablakmérettel, de egy pont
után az aside és section elemek egyszerűen túl keskenyek lettek. Próbáld meg
átméretezni az ablakot most.
A viewport (böngészőablak) egy bizonyos méreténél az oldal a kétoszlopos

elrendezésből egyoszlopos elrendezésűre vált, a blokkok egymás alá
rendeződnek.
Így biztosítható az, hogy az egyes blokkok szélessége ne csökkenjen egy
kényelmetlen határ alá. Itt láthatod azt a kódrészletet, amely ezt a menő trükköt
elérte:
/* Base Styles */
aside,
section {
margin-right: 1.096%;
}
.container {
width: 95vw;
height: 50.13vh;
padding: 1.096%;
}
aside {
width: 33.3%;
height: 100%;
float: left;
}
section {
width: 33.3%;
height: 100%;
float: left;
}
@media (max-width: 420px) {
/* Demonstrational Styles */
aside,
section {
height: 48%;
margin-bottom: 1.096%;
}
/* Layout Styles */
aside,
section {
float: none;
width: auto;
}
}
Az alap stílusok (Base styles) minden egyes képernyőméretre vonatkoznak.

Amikor egy képernyő azonban 420 pixeles, vagy annál keskenyebb,
a @media blokkban megadott szabályok is érvényesülni fognak. Ezek felülírják a
korábban beállított értékeket (a float értéke none lesz és a width értéke auto),
így létrejön az egyoszlopos elrendezés.
+1 tipp: a width: auto hasonlóan viselkedik, mint a width: 100%,

de megpróbálja figyelmen kívül hagyni a margin, padding és border által
hozzáadott teret.
Most, hogy megismerted ezt a módszert, alkalmazzunk pár @media szabályt a

blogsablonunkon.
Mit gondolsz, mi történik, ha a @media szabály feltételét arra módosítod,

hogy min-width: 420px?
A kód nem fog lefutni, a @media szabály nem fog működni.

Amikor a képernyő szélessége 420 pixel vagy annál több,
a @media szabályban szereplő CSS érvényesülni fog.
Amikor a képernyő szélessége 420 pixel vagy annál kevesebb,
a @media szabályban szereplő CSS érvényesülni fog.
A @media szabályban szereplő CSS által kiválasztott elemek minimális
szélessége 420 pixelre lesz beállítva.
Ez igazán szép megoldás volt. Büszke lehetsz magadra!
6.2. A megfelelő media queryk

Ebben a feladatban megváltoztatjuk a header részt úgy, hogy a táblagépeken és
asztali gépeken az oldal teteje helyett az oldal szélén jelenjen meg. De előtte,
még ejtsünk egy pár szót arról, hogy hogyan is kell helyesen megírni a media
queryket.
Minden media query ugyanazokból az elemekből áll:
@media A (B1: B2) {

...
}
Ahol:
 a @media indítja el (inicializálja) a media queryt.

 A a média típusa (media type). Gyakori médiatípusok az all (mind),
a screen (képernyő), a print (nyomtatás) és a speech (beszéd). Ha nem
adod meg a típust, alapértelmezetten a screen érvényesül. (Ami nekünk
tökéletesen megfelel, emiatt nem is írjuk ki legtöbbször.)
 B a media query expression (a media query kifejezés). Ez tartalmazza
a B1-t, a media feature-t, és a B2t, a feature értékét. A leggyakoribb
media feature a min-width és a max-width, amelyek pixel értékeket
fogadnak el.
 Több különböző kifejezést akár össze is fűzhetsz logikai operátorokkal,
mint az and (és), or (vagy) és a not (nem).
 A kapcsos zárójelekben lévő kód ugyanazt a szintaxist követi, mint amit
már a CSS-ben megszokhattál. (Ne feledd el beljebb húzni a media queryn
belüli sorokat. Ez később rengeteg fejfájástól menthet meg.)
+1 tipp: A médiatípusok és media feature-ök teljes listáját megnézheted például

a w3schools.com oldalán.
Ezzel a tudással felvértezve változtassuk meg a header-t.
A header oldalra kerül

Nyiss a blogot tartalmazó binedben egy media queryt a "Main Header Styles"
rész alján:
@media (min-width: 768px) {
Megjegyzés: Ez a szabály egy új elrendezést hoz létre majd azon képernyők

számára, amelyek legalább 768px szélesek. Először ezt építjük meg, utána
foglalkozunk az asztali gépekkel egy külön media queryben. Ezen a példán is
láthatod a "mobile first" elv és a "progressive enhancement" érvényesülését a
gyakorlatban. A szabályok által kijelölt méreteket hívjuk breakpoint-oknak,
törési pontoknak.
Megjegyzés: A 768px furcsa számnak tűnik. A leggyakrabban használt törési

pontok (min-width: 320px, 480px, 768px, 992px és 1200px) azok, amelyek a
Bootstrap nevű keretrendszerben használatosak. De ezeket mindig igazítsd a
saját tartalmadhoz.
Azt szeretnénk, ha a header a bal oldalon jelenne meg, és a képernyő harmadát

foglalná el. Ezen kívül szeretnénk, ha egy helyben maradna akkor is, amikor a
felhasználó az oldalon lejjebb görget. Itt a kód, amely ezt mind megoldja:

.main-header {
position: fixed;
top: 0;
height: 100%;
width: 33.3%;
}
}
Ha átméretezed az Output-panelt, láthatod, hogy az elrendezés pillanatnyilag

teljes káosz. Ne aggódj, jó úton járunk, mindjárt minden a helyére kerül.
+1 tipp: Ha az oldalt a Chrome eszközemulátorában nyitod meg, és kiválasztasz
egy táblagépet, könnyebben nyomon követheted a változásokat.
Milyen @media szabályt használnál ahhoz, hogy létrehozz egy elrendezést

a legalább 1200 pixel szélességű képernyőkre?
@media (min-width: 1200px) {div {width: 20%;}}

@media (width: 20%) {div {min-width: 1200px;}}
@media {div (min-width: 1200px) {width: 20%;}}
@media (div) {min-width: 1200px; width: 20%;}
Úgy bizony!
6.3. A tartalom floatolása

A problémát jelenleg az okozza, hogy a header-t fix helyzetbe hoztuk (position:
fixed), és a fő tartalmi egységünk most mögötte helyezkedik el. Megoldás, ha
ezt az egységet jobbra float-oljuk ugyanannál a törési pontnál (breakpoint).
Nyisd meg a bint, és adj hozzá a CSS-hez egy új címsort "Primary Content
Wrapper Styles" (az elsődleges tartalmat csomagoló egységre vonatkozó
stílusok) névvel a "Main Header" és az "Article" stílusok közé. Azt szeretnénk, ha
ez a blokk az aside rész mellé kerülne, és a viewport maradék részét töltené ki:
/* Primary Content Wrapper Styles */

.primary-content {
float: right;
width: 66.6%;
max-width: 812px;
}
}
Vedd észre, hogy a media query pontosan ugyanazt a törési pontot (breakpoint)
használja, mint amit a headernél alkalmaztunk. A blokkot jobbra floatoltuk, és
így most a két oszlop szépen, egymás mellett helyezkedik el. Hozzáadtunk még
egy max-width tulajdonságot is, hogy a tartalmunk a nagyon nagy képernyőkön
ne váljon kényelmetlenül szélessé.
Ha ráfrissítesz az oldalra, láthatod, hogy a fő tartalmi egység is megtalálta a

helyét. Gratulálunk, most már a táblagépeken is jól mutat az elrendezésed, már
csak az asztali gépek maradtak hátra.
Megjegyzés: Kérdezhetnéd, hogy miért nem pakolunk minden media queryt egy
helyre, a CSS legaljára. Nem illene ez jobban a DRY-elvekhez? Technikailag
tényleg kevesebb sornyi kódot jelentene ez a megoldás, de végeredményben
nehezebben olvashatóvá tenné a kódodat. Amikor egy nagy projekten dolgozol,
szerencsés, ha a CSS az oldal komponensei szerint van rendezve. Így nem kell a
kódban ide-oda ugrálnod, ha egy konkrét részen szeretnél dolgozni.
6.4. A desktop méret

Ha mostani állapotában megnyitod az oldaladat, láthatod, hogy a táblagépekre
szabott megjelenítés a szélesebb, asztali gép méretű képernyőkön már nem
mutat igazán jól. A header túl keskeny, és mivel a tartalmat jobbra floatoltuk, a
két blokk között hatalmas rés tátong.
Vezessünk be pár új media queryt az asztali gép méretre. Módosítsuk ezzel a

header méretét, szűnjön meg a felesleges üres tér a két blokk között. Menj
vissza a "Main Header Styles" részhez, és az alján nyiss egy új media queryt:

.main-header {
width: 20.625%;
}
}
Ez a kódblokk egy új törési pontot definiál (ez most az 1025 pixeles és afölötti
méreteket célozza), és felülírja a header szélességét. Ezen kívül arra van még
szükségünk, hogy a tartalmat balra toljuk. Nyiss egy másik új media queryt a
"Primary Content Wrapper" részben:

.primary-content {
float: none;
position: absolute;
left: 20.625%;
}
}
Frissítsd az oldalt. Az asztali gépekre szánt elrendezés is elkészült. Gratulálok!
Feladat:
Hozd létre az asztali (desktop) elrendezésnél alkalmazandó új media queryket.
Másold ide a bined URL-címét.
A megoldásod:
https://codepen.io/SziRom/full/jOzWgVr
6.5. Összefoglalás a media querykhez

Ebben a leckében a media querykről tanultál. Most már képes vagy:
 elmagyarázni ennek az eszköznek a szerepét és hasznát,

 helyes szintaxisú media queryket írni,
 törési pontokat (breakpoints) definiálni annak érdekében, hogy a
különböző méretű képernyőkön más és más elrendezést jeleníthess meg,
és
 a CSS-kódodat a legjobb olvashatóság szerint rendezni.
Egyetlen dolog maradt hátra, mielőtt a reszponzív webdesign utolsó

darabkájával is megismerkednénk. A JSBin automatikusan hozzáad a kódodhoz
egy nagyon fontos részletet, hogy a media queryk működjenek: a viewport
meta tag-et.
Bár a mobilok böngészői szuperül működnek, egy kis segítségre van szükségük,
hogy a viewport kezdeti méretét és arányát a célnak megfelelően határozzák
meg. Ezért vezette be az Apple a viewport taget.
Anélkül, hogy az apró részletekbe belemerülnénk, most elegendő annyit

megjegyezned, hogy ezt a kis kódrészletet mindig hozzá kell adnod a head
részhez, ha szeretnéd, hogy a media queryk jól működjenek:
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
</head>
Megjegyzés: az initial-scale=1 részt a JSBin nem adja hozzá automatikusan.
Ennyi. Most már mindent tudsz a media queryk alapjairól. :)
Találkozzunk a következő leckében, ahol a kirakósunk utolsó részletéről

beszélünk röviden: a reszponzív médiáról.
Miért kellene hozzáadnod a viewport <meta> taget a HTML-

fájl <head> részéhez?
Nem kell hozzáadnod, minden teljesen jól működik minden készüléken és
minden böngészőben anélkül is.
A viewport tag határozza meg a media queryk törési pontjait.
A viewport tag segít a mobilböngészőknek azonosítani a viewport méretét és
kezdeti arányát.
A viewport tag érvényteleníti a böngészők beépített stíluslapja által
meghatározott CSS-értékeket, amelyek egyébként elrontanák a media queryk
működését.
7.1. A negyedik pillér

Most már tudod, hogyan tedd a szöveget és az oldal elrendezését teljesen
reszponzívvá. Egy dolog van hátra: a reszponzív média.
Azt már tudod, hogyan alakíts egyszerű képeket reszponzívvá azáltal, hogy
százalékban adod meg a méretüket (width: 100%).
Ebben a leckében egy másik alapvető módszerrel ismerkedhetsz meg, amelynek

segítségével különböző médiatípusokat ágyazhatsz be úgy, hogy azok
reszponzívak maradjanak.
Készen állsz? Kattints a Tovább gombra!
7.2. Flexibilis médiabeágyazás

Sajnos a videók (vagy bármilyen más média, amely iframe elemben érkezik)
reszponzív beágyazása nem oldható meg egyszerűen max-width:
100%; szabállyal. De szerencsénkre van egy kis kerülőutas megoldás.
A megoldás elve, hogy az iframe elemet egy olyan konténerrel vesszük körbe,
amelynek a méretaránya azonos a beágyazott média méretarányával. Így a
konténer rákényszeríti a tartalmát, hogy újraszámolja a szélességét és
magasságát. Ezáltal ha a konténer maga reszponzív, a tartalma is ennek
megfelelően fog viselkedni.
Megjegyzés: Ebben a megoldásban egy elég bonyolult CSS-varázslatot találsz.

Nem kell minden részletét teljesen értened ahhoz, hogy alkalmazni tudd (és az
alapos elmagyarázása jelentősen túlmutat a jelen projekten). Ha mégis
részleteiben érdekel, az eredeti cikket itt tudod elolvasni Thierry Koblentz
trükkjéről (angolul).
Lássuk mindezt a gyakorlatban. Nyiss egy új bint JSBinen, és másold bele a

következő kódot:
<iframe width="560" height="315"

src="https://www.youtube.com/embed/4Lsa7N7LHJk?rel=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
Láthatod, hogy teljesen statikus. Változtassunk ezen. Csomagold

az iframe elemet egy figure elembe:
<figure>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/4Lsa7N7LHJk?rel=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
</figure>
Ez lesz az a mágikus elem, amely az iframe helyett az átméretezésért felelős.

Nézzük a hozzá tartozó CSS-t:
figure {
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
position: relative;
}
figure iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Próbáld meg átméretezni az Output-panelt most. Menő, nem? Oké, nézzük csak,
mi is történt:
 Az első lényeges rész a padding-bottom tulajdonság. Ez teremti meg azt a

teret, amelybe a beágyazott média nyúlhat. A figure konténer magassága
így mindig a szélességének 56.25%-a lesz. Ez pontosan a 16:9-es
méretaránynak felel meg, így a beágyazott tartalom teljes egésze látszani
fog.
 A position: relative; biztosítja, hogy az iframe-et a figure elemhez
képest tudjuk pozicionálni.
 A height: 0; részre csak az Internet Explorer 5 és 6 miatt van szükség.
 A kód fennmaradó része pedig egészen magáért beszél. Az iframe
abszolút módon pozicionált, szélessége és magassága is 100%, így mindig
kitölti a rendelkezésére álló konténert, ez biztosítja a reszponzivitást.
És ennyi. Most már tudsz reszponzívan médiát beágyazni. Legyen benne sok
örömöd. :)
+1 tipp: Hogyan jött ki a padding-bottom értéke? Egyszerűen elosztottuk a 9-et

16-tal, és megszoroztuk az eredményt százzal.
Hogyan teheted a beágyazott médiát reszponzívvá?
A max-width: 100%; szabállyal.

Sajnos a beágyazott média nem tehető reszponzívvá.
Az <iframe> elemnek egy olyan reszponzív elemet kell körbevennie,
amelynek a méretaránya azonos a beágyazott média méretarányával.
Az <iframe> elemet egy olyan reszponzív konténerrel kell körbevenni,
amelynek a méretaránya azonos a beágyazott média méretarányával.
7.3. Összefoglalás a reszponzív médiához

Ebben az utolsó leckében a reszponzív médiával ismerkedtél meg – a reszponzív
webdesign utolsó pillérével. Most már tudod:
 Hogyan alkalmazd a width tulajdonságot a relatív egységekkel, hogy

flexibilis képeket hozz létre.
 Hogyan ágyazz be reszponzív iframe-eket, belső méretarányt használva.
A reszponzív média későbbi CodeBerry projektekben még visszatér, de

pillanatnyilag ez a tudás is bőven elegendő.
Egyetlen dolog maradt hátra: gyönyörködni a befejezett blogsablonodban, és

összefoglalni, mi mindent tanultál.
Várlak az utolsó leckében! :)
8.1. Mindent a reszponzív webdesignról

Gratulálok! Befejezted a Reszponzív webdesign projektet. A leckékben a
következő dolgokról tanultál:
 Reszponzív tervezésre alkalmas HTML-váz előkészítése.

 Weben használható betűtípusok kiválasztása, beágyazása és a tipográfia
skálázhatóvá tétele relatív egységek alkalmazásával.
 Relatív egységeken alapuló reszponzív elrendezés létrehozása.
 Különböző képernyőméretekhez alkalmazkodó elrendezések létrehozása
media queryk segítségével.
 Flexibilis képek és média beágyazása.
Mindezen felül pedig létrehoztál egy teljesen reszponzív blogsablont (ha még
nem próbáltad meg átméretezni, tedd meg most, és légy büszke).
Szép munkát végeztél! :) Várunk a következő projektben.

Hét Reszponzív Webdesign

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hét Reszponzív Webdesign

Uploaded by

Copyright:

Available Formats

A1.1. Mit fogsz megtanulni?

Üdvözöllek a Reszponzív webdesign projektben.

Az itt található leckékben megtanulhatod,

 hogyan készíts olyan weboldalt, amely alkalmazkodik a különböző

Amint készen állsz, kezdhetjük is.

1.2. Mit fogsz megépíteni?

 Az oldalon jelenjen meg a cím és a jelmondat (tagline).

1.3. Néhány definíció

A web mobiltelefonokról történő böngészése az elmúlt pár évben

A statikus elrendezésű honlapok világa lassan teljesen a múlté lesz. A különböző

A reszponzív webdesign próbál választ adni erre a kihívásra.

A reszponzív webdesign tulajdonképpen különböző technikák és elvek

 relatív egységek (relative units),

A következő leckékben ezekről a témákról tanulhatsz részletesen. Közben pedig

Készen állsz? Ha igen, találkozzunk a következő leckében, ahol megépítjük az

Mire kínál megoldást a reszponzív webdesign?

Úgy-úgy, ami jó, az nem rossz!

2.1. A HTML megépítése

Megjegyzés: a "mobile first" (elsőként mobilra) megközelítés azt jelenti, hogy

Ha a mobiltelefonra szánt tervekre pillantasz, láthatod, hogy az oldal két nagy

 egy, a főcímet és kapcsolódó tartalmakat magába foglaló rész (header) és

Elsőként adjuk hozzá ezeket a body részhez:

Megjegyzés: Ez a két elem szemantikus (semantic). Ahogy azt már korábban

A main elem való az oldal fő tartalmi részének tárolására. A mi esetünkben a fő

Az article egységek fogják tartalmazni a cikkek címét, a hozzájuk tartozó

Megjegyzés: Minden elemhez hozzáadtam valamilyen kitalált tartalmat. Amikor

Melyik szemantikus tag jelöli a weboldal fő tartalmát?

Ez igazán szép megoldás volt. Büszke lehetsz magadra!

2.2. Egyéb elemek hozzáadása

Add a képeket a létező vázhoz, és adj meg a képeket helyettesítő szöveget

Megjegyzés: Ha az előző feladatból másoltad a kódot, az img tagek már

+1 tipp: Ugyanúgy, ahogy a szövegek esetében, ideiglenes képekre is szükséged

Add hozzá a három képet a HTML-vázhoz, és írd be az alternatív leírásukat a

2.3. Egy egyszerű CSS Reset

Ha a JSBin Output-paneljére tekintesz, láthatod, hogy az alapértelmezett

Alkalmazzunk egy CSS reset (CSS alaphelyzetbe állító) megoldást. Az interneten

/* ==== A SIMPLE CSS RESET FROM ERIC MEYER ==== */

html, body, div, span, applet, object, iframe,

A CSS reset kerül legfelülre - miért is?

Nézd meg ezt a példát:

Három szín értéket adtunk meg ugyanannak a p kiválasztónak. Ha átmásolod a

Hova kerül a CSS reset?

Helyes válasz. Piros pont jár érte!

2.4. Segítő színek

Adj valamilyen osztály (class) attribútumot a header, main és article elemeknek.

Állíts be mindegyiknek valamilyen átlátszó háttérszínt.

Mellékeltem az én megoldásomat (válassz bátran olyan színeket és

/* ==== HELPER COLORS FOR LAYOUT ==== */

2.5. Minden készen áll

Minden egyes lépéshez itt egy lehetséges megoldás, ha elakadtál volna:

Találkozunk a következő leckében. :)

3.1. Hol tartunk?

A tipográfia aprólékos tudománya nem szerves része a reszponzív webdesign-

 hogyan válassz betűkészleteket, ha nem vagy designer,

Megjegyzés: Korábbi projektekben már találkozhattál hasonló témákkal. Most

3.2. A projekthez megfelelő betűkészletek

1. Válassz olyan betűtípust, amely olvasható. Mindegy, mennyire jól mutat

Megjegyzés: A blogsablonhoz a példakódban a "Merriweather" betűtípust

Roboto Condensed & Roboto

3.3. Nem telepített betűkészletek használata

Ha nem webbiztos betűtípust használsz, neked kell gondoskodnod arról, hogy a

Nyisd meg a Google Fonts oldalát, és kövesd az alábbi lépéseket:

Megjegyzés: Ha más betűtípusokat választottál, csak cseréld ki a példákat az