Merge pull request #495 from Czechitas-podklady-WEB/494-responzivita-…

…1-oprava-cvičení-a-formátu-code-snippets

Responzivita: Oprava cvičení a formátu code snippets

html-a-css/bem-a-responzivni-design/cv-responzivni-layout.md

@@ -1,3 +1,4 @@
 ## Cvičení: Flexibilní layout
 
 ::exc[cvlekce/responsive-layout]
+::exc[cvlekce/responsive-article]

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

@@ -39,15 +39,15 @@ Pro tvorbu flexibilního layoutu pomáhá designérům rozvržení stránky do g
 
 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ů, které budou na všech zařízeních zabírat 1/3 stránky, tak jednoduše vytvoříme pomocí procent a funkce `calc()`.
 
-```
+```css
 width: calc(100% / 3);
 ```
 
 #### 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 při zmenšení obrazovky. Zásadní je tady vlastnost `flex-wrap`, pomocí které nastavíme automatické zalamování.
 
-```
+```css
 .container {
   display: flex;
   flex-wrap: wrap;

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

@@ -32,11 +32,10 @@ Další možností jak přizpůsobit obrázek velikosti kontejneru je použití
 
 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"
+```html
+<img
+  srcset="large-img.jpg 1024w, middle-img.jpg 640w, small-img.jpg 320w"
+  src="small.jpg"
 />
 ```
 
@@ -50,14 +49,14 @@ Jak vidíte, připravit bitmapové obrázky pro responzivní web nemusí být je
 
 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.
 
-```
+```css
 .button-login {
-  width: 100%
+  width: 100%;
 }
 
 @media (min-width: 600px) {
   .button-login {
-    width: 50%
+    width: 50%;
   }
 }
 ```
@@ -67,13 +66,12 @@ Výše uvedený kód můžeme číst jako:
 
 Kromě podmínky se šířkou se můžete často setkat s určením typu média - zda jde o obrazovku nebo tisk.
 
-```
+```css
 @media screen and (min-width: 600px) {
 }
 
 @media print {
 }
-
 ```
 
 ::fig[BEM Block]{src=assets/css-media-query.png}