Code n' Social

Miről szól ez a lecke?

Ebben a leckében kipróbálunk néhány megoldást, amitől a weboldal tartalma alkalmazkodik a böngésző ablak/képernyő méretéhez. A felhasználót nem illik kényszeríteni vízszintes görgetésre. Ez jelenti a reszponzívitást a weboldalban. Relatív méretezést fogunk használni, meghatározunk különböző méretezés vagy különböző objektumokat a különböző képernyő méretekhez stb.

Először fogjuk használni a <meta> címkét, arra, hogy információt adjunk meg benne a weboldalunkról.

Új értelmezés:
<!DOCTYPE html> - ez az értelmezést a HTML dokumentumok legelejére másoljuk, így értesítve a böngészőt, hogy HTML5 kódot tartalmaz a megjelenített oldal.

Új szabály:
@media – ezt a szabályt használva a weboldalunkat alkalmazkodóvá tehetjük az eszköz képernyő méretéhez, amely megjeleníti. Figyelembe vehetjük a felbontást, magasságot, szélességet és a képernyő tájolása.

Új HTML címkék:
<meta> - ezt a címkét használjuk arra, hogy a weboldallal kapcsolatos hasznos információt adjunk a weboldal fejlécébe (<head> rész). Ez az információ nem jelenik meg a böngészőben, de a böngésző és keresőmotorok felhasználhatják.
<picture> - ez a címke alkalmas arra, hogy különböző képeket adjunk meg különböző méretű megjelenítésre.

Új CSS tulajdonságok:
min-width – ezzel a tulajdonsággal, bármely méretezhető elemhez adhatunk egy minimális szélességet. Ez annyit eredményez, hogy az elem nem lesz ennél keskenyebb a megjelenítést végző böngésző vagy eszköz méretétől függetlenül.
max-width – ezzel a tulajdonsággal egy felső korlátot rendelhetünk az elem szélességéhez. Az objektum nem szélessége nem emelkedhet nagyobbra.

Példa a <meta> információkra:
<meta charset="UTF-8"> - a weboldalon használt karaktertáblázatot meg lehet adni a szerkesztőprogramban, a webszerveren és a HTML kódban. A böngészőnek ismernie kell a felhasznált karaktertáblázatot, hogy helyesen jelenítse meg a tartalmat.
<meta name="keywords" content="programming, HTML, CSS, Coders Work">
<meta name="description" content="Personal Webpage">
<meta name="author" content="Mike"> - ezeket a beállításokat felhasználhatják a keresőmotorok arra, hogy kategorizálják a weboldalunkat. Mostanában ez nem az egyetlen lehetőség a weboldal típusának meghatározására.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> - ezt a beállítást használhatjuk annak biztosítására, hogy a tartalom helyesen jelenjen meg minden eszközön. Főként mobiltelefonokon használatos.

Azt jelenti, hogy tartalom mérete (százalékban kifejezve) az eszköz méretéhez képest lesz kiszámolva és először minden nagyítás nélkül jelenik meg.

Mitől lesz a weboldal reszponzív?

A méretek százalékban megadása, max-width és min-width használata – az elemet a „szülő objektumhoz” képest (egy
szakasz, table vagy grid) vagy a böngésző ablakhoz képest újraméreteződnek. Értelmezhetünk egy minimum vagy maximum szélességet, hogy az elem mérete ne lehessen se túl kicsi, se túl nagy.

Más relatív méretezések is léteznek, mint em – az alap betűmérethez képest meghatározott méret.

A viewport beállítása – a fent bemutatott módon – nem hatásos, ha a méreteket pixelben adjuk meg (relatív méretezés helyett)

Különböző képek megadása különböző méretekhez – a <picture> címkével határozzuk meg képeket.

Háttérkép állítások – a background-size: cover; beállítást használjuk arra, hogy a háttérképpel kitöltsük a konténer elemet. Használhatjuk a background-size: 100% 100%; beállítást az előbbihez hasonló eredmény eléréséhez. Hasznosak lehetnek, ha az elem mérete, amelynek a háttere van, változik.

Relatív szövegméret meghatározása – a betűméretet nemcsak pixelben adhatjuk meg. Használhatjuk például a vw mértékegységet. Ez a nézőponthoz (kijelző vagy böngésző ablak) képest megadott méretezés.

Az elemek megfelelő pozicionálása – both meg float, display: inline-block beállítások alakítható pozicionálást eredményeznek – így az elemek új sorba kerülnek, ha már nem férnek a sorban.

Keretrendszerek használata – gyakorlott webszerkesztők keretrendszereket használnak munkájuk megkönnyítésére. A keretrendszerek szabványos CSS fájlokat, osztályokat tartalmaznak. Használhatnak JavaScript kódot is, amely a CSS osztályokra, HTML elemekre vonatkoznak.

Olvass még a Bootstrap-ról és a W3.CSS-ről.

Példa a <picture> címke használatára:

A fenti példában a böngésző két kép közül választ: ha a böngésző ablak szélessége nagyobb mint 850 pixel, a könyvet ábrázoló kép jelenik meg, különben a kisebb kép a bakanccsal. Használhatnánk ugyanannak a képnek különböző méretű változatát is.

Példa a @media szabályra:

A fenti példán négy gomb van megadva, a méreteik az alapértelmezett betűmérethez viszonyítva van megadva. Különböző beállítások léteznek a böngésző ablak 600 pixel alatti és fölötti szélességével kapcsolatban.

Egy kisebb ablakban a gombok függőleges helyezkednek el, egy szélesebb ablakban vízszintesen.

Ezzel a szabállyal két állapotot határozzunk meg, ha lebegő elemeket használunk, a gombok egyenként kerülnek új sorba több állapotot érintve.

Feladatok

1. Adja hozzá a szükséges információkat a webhelyünkről a HTML oldalakhoz (meta címkék):
Állítsa be a karakterkészletet UTF-8-ra.
Kulcsszavak hozzáadása: programozás, tanítás, tanfolyamok, órák, HTML, CSS, kódolók
Leírás: Személyes webhely, a HTML, CSS és JavaScript kódolásának tanítása
A nézetablak beállításának hozzáadása is.

Tekintsd meg az eredményt

2. Mielőtt bármilyen stílust csinálnánk a webhelyünk reakcióképessége érdekében, vissza kell állítanunk a leginkább használt html-címkék stílusát, amelyek alapértelmezés szerint eltérő modosítást alkalmazhatnak (margók, lapok stb.), Amelyek eltérhetnek az egyik böngészőtől a másikig. Ezt az eljárást CSS resetnek nevezik.
A style.css fájl kezdetén a következ? visszaállításokat helyezze be: :
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

Tekintsd meg az eredményt

3. Alkalmazza a style.css változtatásokat, hogy oldalunkat érzékelhesse:
Módosítsa a szélességet max. A következő elemek: #header, #menu, #content, #footer.
Most, ha átméretezed a böngészőablakot, észre fogod venni, hogy nem lesz vízszintes görgetés egy jó ideig.

Továbbá, hogy ne legyen a tartalom oldalról oldalra, állítson 20 párnázatot balra és jobbra a testre.

Tekintsd meg az eredményt

4. A gallery.html és style2.css módosításai alkalmazása:
Írj egy online kérdőívet, ahol a 700 képpontos képernyő szélessége esetén a kis képek 2 sorban jelennek meg a 3 helyett.

Tekintsd meg az eredményt

5. Alkalmazza a style.css változtatásokat a fő öntapadó menü reagálásának korrigálásához. Írja be a média lekérdezést, hogy amikor a böngésző eléri a 900 képpontos szélességet, a párnázás minden irányban 10 pixelre változik.

Tekintsd meg az eredményt