Download
1 / 25
250 likes | 448 Views
Layout. Ing. Mari á n Pecko, PhD. Fixný layout. merná jednotka – pixel ( px ) stránka má konštantnú veľkosť bez ohľadu na veľkosť okna prehliadača, alebo veľkosť fontu výhody – jednoduchšie dizajnovateľný , väčšia kontrola nad čitateľnosťou obsahu
E N D
Layout Ing. Marián Pecko, PhD.
Fixný layout • merná jednotka – pixel (px) • stránka má konštantnú veľkosť bez ohľadu na veľkosť okna prehliadača, alebo veľkosť fontu • výhody – jednoduchšie dizajnovateľný, väčšia kontrola nad čitateľnosťou obsahu • nevýhody – ťažko sa určuje ideálna šírka pre optimálnu čitateľnosť, ťažko určiť optimálnu šírku (na trhu je množstvo rozlíšení - 760px pre 800x600, 960px pre 1024x768)
Relatívny layout • relatívne merné jednotky – em, percento (%) • obsah stránky sa prispôsobuje veľkosti okna prehliadača alebo veľkosti fontu • rozdelenie: • elastický • liquidný • fluidný • hybridný
em - štvorček • štvorček – rozmer štvorca, ktorého šírka sa rovná kuželke • kuželka – stupeň písma + riadkový preklad • stupeň písma – font-size • riadkový preklad – medzera medzi riadkami 10/12 – desaťbodové písmo na dvanásťbodovej kuželke, riadkový preklad je 2 body (line-height:1.2, vo Worde 120%)
Elastický layout • merná jednotka – em • veľkosť stĺpcov záleží na veľkosti fontu • výhody – aj keď používateľ zväčší písmo, dizajn sa nezmení; veľmi stabilný layout (všetko sa mení proporcionálne) • nevýhody – používateľ môže zväčšiť písmo natoľko, že stránka bude väčšia ako okno prehliadača (horizontálna rolovacia lišta); ťažko použiteľný na malých monitoroch • riešenie – #wrapper { width:60em; max-width:98%; }
Liquidný layout • merná jednotka – percentá • veľkosť stĺpcov záleží na veľkosti okna prehliadača • výhody – nikdy sa neobjaví horizontálna rolovacia lišta
Fluidný layout • merná jednotka – percentá • špeciálny typ liquidného layoutu • šírka stránky je obmedzená jednou alebo obomi z vlastností min-width a max-width
Hybridný layout • merná jednotka pre šírku stránky – percentá • merná jednotka pre postranný stĺpec – em • výhoda – nikdy sa neobjaví horizontálna rolovacia lišta a zároveň sa nedeformuje postranný stĺpec (napr. s bočným menu)
<body> <div id="wrapper"> <header></header> <nav></nav> <section id="content"> </section> <footer></footer> </div> </body> #wrapper{ width: 960px; /*monitory so šírkou 1024px a viac bez horizontálnej rolovacej lišty */ margin: 0 auto;/*umiestni obsah na stred stránky*/ } header{ background-color: #806d59; } nav{ background-color: #a89888; } section#content{ background-color: #fff; } footer{ background-color: #806d59; }
<body> <div id="wrapper"> <header></header> <div id="container"> <nav></nav> <section id="content"> </section> </div> <footer></footer> </div> </body> #wrapper{ width: 960px; margin: 0 auto; } header{ background-color: #806d59; } #container{ background: #d8d4ba; overflow: auto; /*zruší obtekania v potomkoch*/ width: 100% } nav{ width: 150px; float: left; } section#content{ width: 770px; float: left; padding: 20px; background-color: #fff; } footer{ background-color: #806d59; }
<body> <div id="wrapper"> <header></header> <div id="container"> <nav></nav> <section id="content"> </section> <section id="right"> </section> </div> <footer></footer> </div> </body> #wrapper{ width: 960px; margin: 0 auto; } header{ background-color: #806d59; } #container{ background: #d8d4ba; overflow: auto; width: 100% } nav{ width: 150px; float: left; } section#content{ width: 570px; float: left; padding: 20px; background-color: #fff; } section#right{ width: 200px; float: left; } footer{ background-color: #806d59; }
Responsitívny layout • poskytuje množstvo layoutov stránky, ktoré sa prispôsobujú rôznym šírkam obrazovky • 3 kľúčové techniky: • media queries, media query listeners • flexibilný layout, ktorý používa relatívne dimenzovanie • flexibilné obrázky a médiá prostredníctvom dynamickej zmeny veľkosti alebo CSS
1. Media Queries • prispôsobovanie štýlov podľa splnenia daného dopytu • môžu sa používať logické operátory AND a NOT, čiarka plní funkciu logického OR • funkcie: width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution... • 3 spôsoby implementovania: • importovanie z externého súboru @import url(style600min.css) screen and (min-width: 600px); • uviesť dopyt do prvku link do atribútu media <linkrel="stylesheet" media="screen and (max-device-width: 800px)" href="style800.css" > • uvedením priamo do súboru
#nav { float: right; } #navul { list-style: none; } @mediascreen and (min-width: 400px) and (orientation: portrait) { #navli { float: right; margin: 0 00 .5em; border:1px solid #000000; } } @mediascreen and (min-width: 800px) { #nav { width: 200px; } #navli { float: left; margin: 0 00 .5em; border: none; } }
2. Media Query Listeners • CSS Object Model (CSSOM) • vykonajú skript, ako reakciu na zmenu dopytu • CSS – zmena dizajnu alebo veľkosti prvkov • JS – zmena obsahu alebo funkcionality • napr. na malých obrazovkách chceme kratší nadpis, iný obrázok,...
window.matchMedia – do neho vkladáme media query var mq = window.matchMedia( "(min-width: 500px)" ); vlastnosť matches – vracia bool hodnotu v závislosti na výsledku dopytu if (mq.matches) { // šírka okna je min. 500px } else { // šírka okna je menej ako 500px }
// mediaqueryeventhandler if (matchMedia) { var mq = window.matchMedia("(min-width: 500px)"); mq.addListener(WidthChange); WidthChange(mq); } // mediaquerychange functionWidthChange(mq) { if (mq.matches) { // šírka okna je min. 500px } else { // šírka okna je menej ako 500px } } addListener – naviaže udalosť na DOM prvok
3. Viewport • metatag, ktorý zisťuje aktuálne rozlíšenie • ďalšie nastavenia tohto tagu: maximum-zoom, initial-scale <meta name="viewport" content="width=device-width,initial-scale=1">
4. Flexibilný layout • CSS3 Grid Layout • vnáša do CSS typický súradnicový systém • iný relatívny layout (elastický, liquidný, fluidný, hybridný)
5. Flexibilné obrázky a médiá • prispôsobovať obrázky a iné médiá, v závislosti na zariadení • škálovanie (úprava mierky), CSS vlastnosť overflow img, object { max-width: 100%; } img, object { overflow:hidden; /*dynamicky oreže obrázok tak, aby sa zmestili do kontajnera*/ }
6. Ostatné • tel: URI schéma <a href="tel:+421415133065">041/513-3065 </a> • geolokácia • menej JS • offline prístup
