Grafikai tervezés - Webdesign - Honlapkészítés | Websablon | Wordpress
Mobil web design vagy reszponzív webdesign
Kategóriák : CSS3, HTML5, Responsive
Mobil web design vagy reszponzív webdesignAlábbiakban négy pontban összesűrítettem, hogy melyek azok a beállítások, amelyek minden reszponzív, azaz méretezhető, vagy másként mobil eszközökön is megjeleníthető tartalmak készítése során használni kell egy reszponzív weboldalon.
Az első három pontban felsorolt beállításokat a Bootstrap is használja a negyedik pontban megadott struktúrákban.
1) HTML HEAD META deklaráció
<meta name=”viewport” content=”initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width” />
A viewport <meta> tag a <head> elemben meghatározza, hogy a böngésző miként kezelje az oldal nagyíthatóságát és dimenzióit a megjelenítéshez. A width=device-width beállítja az oldal szélességét úgy, hogy az kövesse a megjelenítő eszköz szélességét, amely az eszköz képernyőjének méretétől is függ. A initial-scale=1 beállítja a nagyítás(zoom) kezdeti értékét, amikor az oldalt először tölti be a böngésző.
2) HTML DIV tagok vagy elemek igazítása vagy lebegtetés
A div tagok igazítását a következő egyszerű példa szemlélteti. A külső wrapper tag a konténer és a belső két div már balra és jobbra igazított lesz. Az igazítás beállítások érvényességét a clear:both megadásával állíthatjuk vissza alapértékre.
<div id=”wrapper”>
<div style=”float: left;”></div> <div id=”” style=”float: right;”></div>
<div style=”clear: both;”></div> </div>
3) CSS3 MEDIA QUERY
Ha a böngésző ablakának szélességét változtatjuk, akkor bizonyos div tagok eltűnhetnek, mások megjelenhetnek. Ilyen például a mobil menü is, amely akkor mutatja magát, ha az oldal szélessége a mobiltelefonok méretére zsugorodik.
CSS3 Példa Megváltozik a háttér színe, ha a HTML dokumentum mérete kisebb, mint 300 képpont. @media screen and (max-width: 300px) { body { background-color: lightblue; } }
4) Bootstrap mobile first(Mobil eszközök elsőként) beállítások
Mit tartalmaz a Bootstrap? • mobil menü • rácsszerkezet div tagokkal