<< 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 ...
Zvětšit

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;
RSS