Responzivita: doplnit informace

html-a-css/bem-a-responzivni-design/how-to-responsive.md

@@ -17,6 +17,7 @@ Prvním krokem pro tvorbu responzivního webu je přidat `meta` značku `viewpor
 </html>
 ```
 
+::fig[Meta viewport]{src=assets/meta-viewport.png}
 
 ## Techniky responzivního webdesignu
 
@@ -30,16 +31,25 @@ V této lekci si projdeme flexibilní layout.
 
 ### Flexibilní layout
 
-Pro tvorbu flexibilního layoutu pomáhá designérům grid, neboli mřížka. Jde o systém sloupců a řádků, kde elementy zabírají vždy nějaký poměr stránky nehledě na na velikost zařízení. Oproti neresponsivním webům se tak třeba několikaslopcový grid nezmenší (neodzoomuje), aby se vmáčkl na telefon, ale sloupce se zalomí pod sebe. [Příklad komponent navrhovaných do grid systému.](https://dribbble.com/shots/15341964-Grid-System-UI-Components)
+Pro tvorbu flexibilního layoutu pomáhá designérům rozvržení stránky do gridu, neboli mřížky. Jde o systém sloupců a řádků, kde elementy zabírají vždy nějaký poměr stránky nehledě na velikost zařízení. Při změně velikosti zařízení si prvky na stránce drží svůj poměr, nebo se zalomí pod sebe, pokud už je prostor nedostačující. Oproti neresponzivním webům tak třeba několikaslopcový grid nepřeteče mimo viewport menšího zařízení, ale sloupce se zalomí pod sebe. 
 
-Pružného layoutu, který se přizpůsobí jakékoli velikosti stránek, dosáhneme pomocí relativních jednotek. Díky procentům budou elementy na stránce zabírat stejný poměr prostoru nehledě na rozlišení. 
+::fig[grid-responzivni]{src=assets/grid-gif.gif}
 
+#### Relativní jednotky
 
+Pružného layoutu, který se přizpůsobí jakékoli velikosti stránek, dosáhneme pomocí relativních jednotek jako jsou procenta, `vw` a `vh`. Díky nim budou elementy na stránce zabírat stejný poměr prostoru nehledě na velikost zařízení. Mřížku např. tří sloupců si tak jednoduše vytvoříme pomocí procent a funkce `calc()`. 
 
-Mřížku napři. tří sloupců si tak jednoduše vytvoříme pomocí procent a funkce calc()
+```
+width: calc(100% / 3);
+```
 
-Stejně tak se hodí jednotky vh a vw, kde pracujeme s poměrem aktuálního viewportu. 
+#### Flexbox
 
-Flexbox
+Další nástroj pro tvorbu responzivního layoutu už znáte - je to flexbox. S ním snadno zařídíte např. responzivní galerii obrázků, které se budou zalamovat pod sebe nehledě na velikost obrazovky. Zásadní je tady vlastnost `flex-wrap`, pomocí které nastavíme automatické zalamování.
 
-Další nástroj pro tvorbu reponsivního layoutu už znáte - je o flexbox. Pomocí něj např. zařídíte responsivní galerii obrázků, které se budou zalamovat pod sebe nehledě na velikost obrazovky.
+```
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+```

html-a-css/responzivni-design/responsive-theory.md

@@ -1,33 +1,34 @@
 ## Techniky responzivního webdesignu
 
-Máme tři hlavní techniky responzivního webdesignu, v minulé lekci jsme prošli flexibilní grid, dnes se zaměříme na další dvě:
+Máme tři hlavní techniky responzivního webdesignu, v minulé lekci jsme prošli flexibilní layout, dnes se zaměříme na další dvě:
 
 - flexibilní obrázky
 - media queries
 
 ### Flexibilní obrázky
 
-Obrázky na stránce často dostáváme v různých velikostech. Je potřeba, aby uživatel i na malém displeji viděl celý obrázek a ne jen roh nebo výřez.
+Obrázky na stránce často dostáváme v různých velikostech. Je potřeba, aby uživatel i na malém displeji viděl celý obrázek a ne jen roh nebo výřez, nebo aby obrázek nezabral celou stránku a nevytvářel nám zbytečné scrollbary.
 
-Fluidní obrázky jsou takové, které se přizpůsobují kontejneru, ve kterém jsou umístěny. Dosáhneme toho nastavením stylu obrázku na
+Fluidní obrázky jsou takové, které se přizpůsobují kontejneru, ve kterém jsou umístěny. Pokud chceme, aby obrázek zabíral celou šířku svého kontejneru, nastavíme:
 
 ```css
 img {
   width: 100%;
 }
 ```
 
-Pokud chceme, aby obrázek měl ideálně šířku 500px, a pokud se nevejde, tak se přizpůsobil obsahu, můžeme použít tento zápis.
+Toto ale znamená, že se při zvětšení kontejneru obrázek může roztáhnout nad svojí původní šířku, a mít tak horší kvalitu. Pokud chceme, aby se obrázek přizpůsobil obsahu, ale nepřekročil svoji původní velikost, použijeme `max-width`. 
 
 ```css
 img {
-  width: 500px;
   max-width: 100%;
 }
 ```
 
-::codepen{user=marketaanezka id=jOYBePP tab=html,result}
-<br/>
+Tady bude mít obrázek ideálně šířku 500px, a pokud se nevejde, tak se zmenší.
+
+
+
 Další možností jak přizpůsobit obrázek velikosti kontejneru je použití [background image](https://www.freecodecamp.org/news/css-background-image-with-html-example-code/).
 
 Pro případ, že potřebujeme ovlivnit i rychlost načítání, je možnost na menším displeji zobrazovat menší obrázek a na větším zase obrázek v lepší kvalitě. K tomu se používá [srcset](https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/).