Responzivita 2: doplnění textu

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

@@ -1,23 +1,26 @@
 ## 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.
+
+#### Flexibilní šířka
+
+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:
 
-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
 
 ```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`. Zároveň můžeme využít `width` pro specifikování jeho ideální šířky.
 
 ```css
 img {
@@ -26,15 +29,28 @@ img {
 }
 ```
 
-::codepen{user=marketaanezka id=jOYBePP tab=html,result}
-<br/>
 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/).
+#### Různé velikosti podle zařízení
+
+U obrázků je také dobré myslet na jejich datový objem, abychom zbytečně nenutili uživatele mobilních zařízení stahovat obrázky o velikosti pro desktop. Nechceme jim vyplýtvat data ani zpomalovat rychlost načítání stránky. V ideálním případě do HTML připravíme různé varianty velikostí.
+
+```
+<img srcset="large-img.jpg 1024w,
+middle-img.jpg 640w,
+small-img.jpg  320w"
+src="small.jpg"
+/>
+```
+Kromě vlastnosti `src` tedy přidáme ještě vlastnost `srcset`, kde uvedeme varianty obrázku a jeho šířku. Prohlížeč pak sám podle šířky viewportu a hardwarového rozlišení zařízení vybere vhodný obrázek. Výpočet pro výběr obrázku je jednoduchý: šířka okna x poměr harwarových pixelů vůči CSS pixelům (_device-pixel-ratio_). (Vzpomeňmě si na předchozí lekci, kde jsme zmiňovali, že zařízení s vysokým rozlišením můžou mít poměr 2, 4 atp.) 
+
+Např.: U telefonu s velikostí displeje 400px a poměrem pixelů 2, vybere prohlížeč největší obrázek large-img, který se nejvíce blíží k ideální velikosti 800px.
+
+Jak vidíte, připravit bitmapové obrázky pro responzivní web nemusí být jednoduché. Nejlepší je proto využívat vektorového formátu SVG, kde je to možné. Oproti bitmapám má menší datový objem a je nezávislý na zmíněném device-pixel-ratio. [Více o svg.](https://www.vzhurudolu.cz/prirucka/svg) 
 
 ### Media queries
 
-Hlavním nástrojem pro tvorbu responzivních stránek jsou media queries. Je to způsob, jak v css aplikovat nějaké styly pouze pokud zařízení odpovídá požadovaným parametrům.
+Hlavním nástrojem pro tvorbu responzivních stránek jsou media queries. Je to způsob, jak v CSS aplikovat nějaké styly pouze pokud zařízení odpovídá požadovaným parametrům.
 
 ```
 .button-login {
@@ -51,8 +67,21 @@ Hlavním nástrojem pro tvorbu responzivních stránek jsou media queries. Je to
 Výše uvedený kód můžeme číst jako:
 **element s třídou `button-login` má primárně šířku 100% svého rodiče a pokud je zařízení širší než 600px má šířku 50% svého rodiče.**
 
-I přesto, že je možné uvádět v media queries [více dalších podmínek](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), doporučuje se jít od nejmenšího zařízení a přidávát postupně podmínky pro větší a větší šířky displejů.
+Kromě podmínky se šířkou se můžete často setkat s určením typu média - zda jde o obrazovku nebo tisk. 
+
+```
+@media screen and (min-width: 600px) {
+}
+
+@media print {
+}
+ 
+```
+
+::fig[BEM Block]{src=assets/css-media-query.png}
+
+I přesto, že je možné uvádět v media queries [více dalších podmínek](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), nás zajímá hlavně vlastnost `min-width`. Následujeme mobile-first přístup a tak začínáme od nejmenší velikosti a postupně přidáváme podmínky se zvětšující se šířkou displeje.
 
 #### Breakpoint
 
-Breakpoint se říká bodu, kdy se při překročení určité šířky displeje styl naší stránky změní. Neexistují oficiální breakpointy, dobrým pravidlem je **vytvořit breakpoint ve chvíli, kdy současný design už nedává smysl.** Je možné se podívat třeba na breakpointy populárních stylovacích knihoven jako [Boostrap](https://getbootstrap.com/docs/5.0/layout/breakpoints/), [Material UI](https://mui.com/customization/breakpoints/) nebo [Tailwinds](https://tailwindcss.com/docs/screens). Ve vývojářských nástrojích je možné taky najít základní breakpointy.
+Breakpoint se říká bodu, kdy se při překročení určité šířky displeje styl naší stránky změní. Neexistují oficiální breakpointy, dobrým pravidlem je **vytvořit breakpoint ve chvíli, kdy současný design už nedává smysl.** S počtem breakpointů to ale nesmíme přehánět, protože budeme muset pro každý přidávat další media query. Pro inspiraci je možné se podívat třeba na breakpointy populárních stylovacích knihoven jako [Boostrap](https://getbootstrap.com/docs/5.0/layout/breakpoints/), [Material UI](https://mui.com/customization/breakpoints/) nebo [Tailwind](https://tailwindcss.com/docs/screens). Ve vývojářských nástrojích je možné taky najít základní breakpointy.