<< Optimalizace webu | Tvorba webu | Programování webu >>
Optimalizace pro různá zařízení
Responzivita
- zajištění čitelnosti a ovladatelnosti pro různá zařízení a média
- stolní monitory, mobilní zařízení s dotykovým displejem, tiskárny, čtečky ...
Proporcionální (flexibiní) design
Sjednocení měřítka zobrazení na různých zařízeních
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
Definice rozměrů pomocí relativních jednotek
- procenta - rozměr odvozen od nadřazeného (obalového) prvku
- em - rozměr odvozen od rozměru písmene M (pro standardní velikost písma 1em = 16px)
- vh - rozměr odvozen od výšky průhledu (1vh = 1/100 výšky viewportu)
- vw - rozměr odvozen od šířky průhledu (1vw = 1/100 šířky viewportu)
Obtékání a pozicování bloků
- Position: relative; Float: left/right; Overflow: auto;
Stylování bloků, obrázků a tabulek
- max-width: 100%; height: auto;
Flexibilní stylování bloků - FlexBox
Využití pružného rastru - CSS3 Grid Layout
- zatím problematická podpora v prohlížečích
Podmíněné styly - Media Queries
Stylování podle velikosti průhledu (viewport)
- definice bodů zlomu (BreakPoints)
- Výchozí velikostí je monitor (Desktop First)
/* všechny styly pro desktop */ … @media (max-width: 960px) { /* všechny styly pro tablet */ … } @media (max-width: 480x) { /* všechny styly pro mobil */ … }
- Výchozí velikostí je mobilní telefon (Mobile First)
/* všechny styly pro mobil */ … @media (min-width: 480px) { /* všechny styly pro tablet */ … } @media (min-width: 960px) { /* všechny styly pro desktop */ … }
Stylování podle typu zobrazovacího zařízení
- all, screen, print, tv
- styl prot tisk
@media print { * {color: black; background: #fff} }
Stylování podle orientace zobrazovacího zařízení
- orientation: porttrait; orientation:landscape;