Invalid RSS feed!

Bevezetés a responsive tervezésbe – Media Queries

-

Ismerkedjünk meg a responsive tervezés világával. A sorozatban átvesszük a tervezési szemlélethez kapcsolódó fogalmakat, területeket. 

rwd-cover-21

A HTML fájlunkhoz hozzá csatolt Media Query stíluslap,  médiától és kontextustól függően, csak akkor fut le ha teljesül az előre megadott feltétel. Így elérhetjük, hogy a különböző típusú eszközöket, mint a nyomtatók, a kijelzővel rendelkező készülékek, mind egyedi stíluslappal rendelkezzenek. Lehetőségünk van egy adott típus esetében megadni formázásokat, felbontástól, tájolástól, pixel sűrűségtől függően is.

Bevezető

Szinte biztos, hogy találkoztunk már média lekérdezéssel. A legtöbb HTML/CSS tankönyvben általános gyakorlat a nyomtatási kép formázása CSS-el. A média lekérdezések már a HTML 4 és CSS 2.0 szabványban is szerepeltek, így természetesen mind XHTML/HTML 5 és mind CSS 2.1/CSS 3.0-a specifikációjának a része.

A média lekérdezések deklarálása során egyetlen egy médiát kell megadnunk, valamint nulla, vagy több feltételt az adott típusra vonatkozóan. Kétféle módon használhatjuk őket, hivatkozhatunk rájuk HTML-ből és megadhatjuk őket a CSS fájlban.

<link href="print.css" rel="stylesheet" media="print" type="text/css" />

Hivatkozás a nyomtatóknak szánt stílusra HTML-ből

@media screen {
  body {
    background: red;
  }
}

A média lekérdezés használata CSS fájlban.

A HTML4-ben támogatott média típusok a következők: aural, braille, handheld, print, projection, screen, tty, tv. A CSS 2 szabványa ugyan ezeket támogatja kiegészítve az embossed-al és a speech-el. Az összes média típus megcélzásához az all kulcsszót kell használnunk.

Média lekérdezések (Media Queries)

A média lekérdezések használata egy nagyon rugalmas módja a különböző eszközökhöz rendelt egyedi formázás megadásának. Nézzünk egy példát az összetettebb feltétel megadására.

<link href="example.css" rel="stylesheet" media="screen and (max-width:500px)" />

A fenti stílus csak a screen típusú, legfeljebb 500px széles kijelzőkön fut le.

@media all and (min-width:500px) { … }

A fenti stílus az összes típuson lefut, ami legalább 500px széles.

A stílus lapokat @import utasítás segítségével is meghívhatjuk a CSS fájljainkban.

@import url(color.css) screen and (width: 500px);

Mint már tudjuk, az all kulcsszó az összes média eszközt megcélozza. Ha a deklarálás során nem adunk meg média eszköz típust, akkor alapértelmezés szerint megcélozzuk az összeset, tehát olyan mintha az all értéket használnánk.

A média lekérdezéseket vesszővel elválasztva listává bővíthetjük, ilyenkor több médiára tudjuk alkalmazni ugyanazokat a stílusokat.

@media screen and (color), projection and (color) { … }

A NOT kulcsszóval tagadhatjuk a média lekérdezés feltételeit. Tehát, a következő stílus lap akkor töltődik be, ha a média típusa nem nyomtató és nagyobb a szélessége 500px-nél.

<link href="example.css" rel="stylesheet" media="not print and (min-width: 500px)" />

Az ONLY kulcsszóval elrejthetjük a lekérdezéseket a régebbi böngészők elől, mivel ezek általában nem képesek értelmezni ezt a kulcsszót, így kihagyják azt.

<link href="example.css" rel="stylesheet" media="only screen and (color)" />

Ha egy olyan tulajdonságot adunk meg, egy olyan média típusnak, ami nem támogatja a megadott tulajdonságot, akkor a lekérdezés értéke mindig hamis lesz. Például, mivel a print típusnak nincs, device-aspect-ratio tulajdonsága a feltétel hamis lesz.

Média tulajdonságok

Média tulajdonságoknak nevezzük a média típusok után következő, az azokra vonatkozó értékeket. Ilyen például a szélesség, magasság. A legtöbb tulajdonság képes kezelni a min-, max- előtagokat. Így lehetőségünk nyílik intervallumokat megadni. Nézzük néhány fontosabb tulajdonságot:

width

  • Érték: hosszúság
  • Típus: képi és tapintható médiák
  • min/max prefix: igen

A width tulajdonsággal megadhatjuk az aktuális média viewport (megjelenítési felület) szélességét a görgetési sávot beleszámítva. A lenti feltétel akkor válik igazzá, ha a média típus kijelző és 300px – 700px közötti a felbontása.

@media screen and (min-width: 300px) and (max-width: 700px) { … }

height

  • Érték: hosszúság
  • Típus: képi és tapintható médiák
  • min/max prefix: igen

A height tulajdonsággal megadhatjuk az aktuális média viewport (megjelenítési felület) magasságát a görgetési sávot beleszámítva.

device-width – device-height

  • Érték: hosszúság
  • Típus: képi és tapintható médiák
  • min/max prefix: igen

A device-width/device-height tulajdonságokkal a kijelzők fizikai méretét adhatjuk meg. Erre a tulajdonságra azért van szükség, mert a pixel sűrűség növekedésével a szélesség/magasság már nem egyezik meg a tényleges, fizikai értelemben vett szélességgel/magassággal.

@media screen and (device-width: 768px) {
  body {
    background: red;
  }
}

orientation

  • Érték: portrait/landscape
  • Típus: bitmap médiák
  • min/max prefix: nem

A kép irány akkor lesz portré, ha a magasság értéke nagyobb, vagy egyenlő a szélességgel, különben tájkép értéket kap. Természetesen ezt a tulajdonságot tabletek és telefonok esetében tudjuk kihasználni.

@media all and (orientation:portrait) { … }

aspect-ratio,  device-aspect-ratio

  • Érték: arány
  • Típus: bitmap médiák
  • min/max prefix:  nem

Az aspect-ratio és a device-aspect-ratio tulajdonsággal a kijelzők arányát adhatjuk meg. Az aspect-ratio esetében a width és a height , míg a device-aspect-ratio esetén device-width, device-height értéket kell figyelembe vennünk. Ezzel a tulajdonsággal könnyedén célozhatunk meg azonos arányú kijelzőket.

@media screen and (device-aspect-ratio: 16/9) { … }

Töréspontok

Töréspontoknak (breakpoints) nevezzük azokat a szélesség értékeket, melyeken szeretnénk, ha más stílust kapna az aktuálisan formázott oldal. Ezek az értékek általában egy telefon, tablet és monitor méretet takarnak. Többnyire 3 értékkel lefedhetjük a legtöbb kijelzővel rendelkező eszközt. A Bootstrap 3-as verziójában ezek az értékek a 768px, 992px és 1200px. Természetesen az értékeket mi határozhatjuk meg, azonban mindenképpen figyelembe kell venni a piacon jelenlévő, nagyobb részesedéssel rendelkező kijelző méreteket.

Média lekérdezés IE8-ban – respond.js

Előfordulhat, hogy működésre kell bírnunk a responsive oldalunkat IE8-ban. Ilyenkor vehetjük nagy hasznát a respond.js-nek, aminek a segítségével működésre bírhatjuk a média lekérdezéseket és a min-/max- prefixes CSS tulajdonságokat IE8-ban, vagy korábbi böngészőben. A script működési elve, hogy megkeresi az éppen aktuális @media lekérdezéseket és lefuttatja őket. Használatához nincs más dolgunk, mint belinkelni a HTML dokumentumunkba.

Összefoglalás

A Media Query-k már régóta jelen vannak a webes tervezésben, azonban komolyabban csak a responsive tervezésnek köszönhetően kerültek előtérbe. A módszer segítségével korlátlanul variálhatjuk a stílusainkat helyzettől függően.

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.