From ebe679993428054c9c6c2e2c8e3edfba1e78037f Mon Sep 17 00:00:00 2001 From: Eva Machova Date: Mon, 11 Sep 2023 11:25:07 +0200 Subject: [PATCH] =?UTF-8?q?Responzivita:=20Upravit=20form=C3=A1t=20code=20?= =?UTF-8?q?snippets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html-a-css/bem-a-responzivni-design/how-to-responsive.md | 4 ++-- html-a-css/responzivni-design/responsive-theory.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/html-a-css/bem-a-responzivni-design/how-to-responsive.md b/html-a-css/bem-a-responzivni-design/how-to-responsive.md index 6a87873e..555e41eb 100644 --- a/html-a-css/bem-a-responzivni-design/how-to-responsive.md +++ b/html-a-css/bem-a-responzivni-design/how-to-responsive.md @@ -39,7 +39,7 @@ 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); ``` @@ -47,7 +47,7 @@ width: calc(100% / 3); 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; diff --git a/html-a-css/responzivni-design/responsive-theory.md b/html-a-css/responzivni-design/responsive-theory.md index 38a0949f..fb0406bb 100644 --- a/html-a-css/responzivni-design/responsive-theory.md +++ b/html-a-css/responzivni-design/responsive-theory.md @@ -32,7 +32,7 @@ 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í. -``` +```html