Professional Documents
Culture Documents
Hét Reszponzív Webdesign
Hét Reszponzív Webdesign
Jó szórakozás lesz! :)
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.
Mi az a Reszponzív webdesign?
A négy pillér
A fő rész
<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="">
<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 Listicle For You and Your Boyfriend</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>
<a href="#">Load more stories...</a>
</main>
https://www.lipsum.com/
Bacon Ipsum - A Meatier Lorem Ipsum Generator
http://www.slipsum.com/
<header>
<h1>
<main>
<article>
Ellenőrzöm a válaszom
image-01: http://i.imgur.com/rGWSW9i.jpg
image-02: http://i.imgur.com/JS1RcVU.jpg
image-03: http://i.imgur.com/q80S4Ro.jpg
https://unsplash.com/
Feladat:
https://codepen.io/SziRom/pen/wvmapQP
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 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.
p {
color: red;
}
p {
color: green;
}
p {
color: blue;
}
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.
.main-header {
background-color: rgba(255, 248, 53, .3);
}
.primary-content {
background-color: rgba(140, 96, 255, .3);
}
.post {
background-color: rgba(255, 0, 0, .3);
}
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
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.
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 jó külcsín alapja a jól megválasztott betűk. A fentieket követve a fél siker már
garantált.
Feladat:
Melyik két betűtípust választottad a blogsablonodhoz? Másold ide a nevüket.
A megoldásod:
<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.
Ellenőrzöm a válaszom
Úgy bizony!
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
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
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;
}
em
rem
px
vw
Ellenőrzöm a válaszom
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).
<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.
<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;
}
Ellenőrzöm a válaszom
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é.
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.
Ellenőrzöm a válaszom
Ahol:
Feladat:
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:
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%;
}
4.6. Százalékok
Ha megoldottad az előző feladatot, a CSS-ed ehhez hasonlóan alakult:
body {
font-family: Merriweather, 'Times New Roman', serif;
font-size: 1.125rem;
line-height: 2rem;
color: #333;
}
h1,
h2 {
font-family: 'Open Sans', Arial, sans-serif;
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.6rem;
color: #e5127d;
}
.main-header p {
font-size: 1.125rem;
letter-spacing: 0.125rem;
color: #8c8e9b;
}
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.
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%
Ellenőrzöm a válaszom
A vw - viewport szélessége
main {
width: 50vw;
}
A vh - viewport magassága
header {
height: 25vh;
}
100%
100vh
1vw
100vw
Ott találkozunk! :)
+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.
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:
Ha készen állsz, csak nyomd meg a "Tovább" gombot, és már kezdjük is.
<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.
A varázsformula
A szélességek átalakítása:
A magasságok átalakítása:
aside {
width: 33.3%;
height: 100%;
float: left;
}
section {
width: 33.3%;
height: 100%;
float: left;
}
A konténer átalakítása
.container {
width: 95vw;
height: 50.13vh;
padding: 15px;
}
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%;
}
.container {
width: 95vw;
height: 50.13vh;
padding: 1.096%;
}
Ellenőrzöm a válaszom
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.
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;
}
+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
.post {
width: 95%;
margin: 1.25rem auto;
padding: 0.3125rem;
}
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:
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
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr {
margin-bottom: 1rem;
}
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;
}
Í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. :)
Ott találkozunk! :)
Ú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.
/* 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;
}
}
Ahol:
Ellenőrzöm a válaszom
Úgy bizony!
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:
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é.
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.
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:
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
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.
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
</head>
Ellenőrzöm a válaszom
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%).
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.
<figure>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/4Lsa7N7LHJk?rel=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
</figure>
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:
És ennyi. Most már tudsz reszponzívan médiát beágyazni. Legyen benne sok
örömöd. :)
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).