Skip to content

Latest commit

 

History

History
79 lines (51 loc) · 2.49 KB

responzivni-design.md

File metadata and controls

79 lines (51 loc) · 2.49 KB

Responzivní design

Fixní layout

  • Již dlouho překonaný styl
  • Fixní = statický
  • Většina elementů je v px
  • Elementy se po stránce nepohybují
  • Nezáleží na velikosti obrazovky

Fluidní layout

  • Stále hodně používaný i když překonaný
  • Většina velikostí je zapsána v %
  • Elementy se po stránce nepohybují
  • Záleží na velikosti obrazovky
  • Není vhodný pro mobilní zařízení

Adaptivní layout

  • Před media queries asi nejpoužívanější
  • Pro každou velikost definovaná verze
  • Elementy už se na stránce pohybují
  • Záleží na velikosti obrazovky
  • Zbytečný kód pro každou verzi

Responzivní layout

  • Bere si to nejlepší z fluidního a adaptivního
  • Používají se breakpointy media-queries
  • Rozděluje rozlišení do rozmezí
  • Elementy se přesouvají, mění pozici i velikost
  • Minimalizuje zdrojový kód

Mobile first

Media queries / breakpointy

Media queries / breakpointy

  • Typ média - screen, all, print, only
  • Logické operátory - and, (or = ,)
  • Vlastnost média - min-width, max-width, atd.
  • Hodnota zlomu - px, em

Nejpoužívanější queries

  • @media (min-width: 1025px) { … }
  • @media (min-width: 768px) and (max-width: 1025px) { … }
  • @media (max-width: 767px) { … }

Cvičení 1

Cvičení 2

Cvičení 3

Cvičení 4