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
![](https://miro.medium.com/max/2000/1*dUZudP2xfPLzMiw5L8ieTQ.gif)
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í
![](https://miro.medium.com/max/2000/1*Hul4o5D73lpzVeVTk2Cuag.gif)
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
![](https://miro.medium.com/max/2000/1*LP6jyJPC17EVOk8nKEHYzg.gif)
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
![](https://miro.medium.com/max/2000/1*jGg5Y0CIZSGSTDTabsarbQ.gif)
Mobile first
![](https://content.altexsoft.com/media/2017/04/mobile-first-design-1024x404.png)
![](https://www.vzhurudolu.cz/prirucka-content/dist/images/original/media-query.jpg)
- 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