From 1f6c8b51b4f2d59c2c9cbe5e28f9d6a4920f788b Mon Sep 17 00:00:00 2001 From: Eva Machova Date: Sat, 9 Sep 2023 20:09:40 +0200 Subject: [PATCH] =?UTF-8?q?Responzivita:=20Drobn=C3=A9=20=C3=BApravy?= 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 | 6 +++--- html-a-css/bem-a-responzivni-design/mobile-first.md | 2 +- html-a-css/responzivni-design/responsive-theory.md | 7 ++----- 3 files changed, 6 insertions(+), 9 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 1455a039..3f868894 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 @@ -31,7 +31,7 @@ V této lekci si projdeme flexibilní layout. ### Flexibilní layout -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 zmenší se počet sloupců. +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ěkolikasloupcový grid nepřeteče mimo viewport menšího zařízení, ale zmenší se jeho počet sloupců. ::fig[grid-responzivni]{src=assets/grid-gif.gif} @@ -45,7 +45,7 @@ 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 nehledě na velikost obrazovky. Zásadní je tady vlastnost `flex-wrap`, pomocí které nastavíme automatické zalamování. +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í. ``` .container { @@ -55,4 +55,4 @@ Další nástroj pro tvorbu responzivního layoutu už znáte - je to flexbox. S ``` #### CSS Grid -Poslední nástroj, který musíme zmínit, ale který není součástí našeho kurzu je CSS Grid. V rámci samostudia si můžete pročíst, [jak se pomocí něj nastavují řádky a sloupce layoutu](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). +Poslední nástroj, který musíme zmínit, ale který není součástí našeho kurzu je CSS Grid. V rámci samostudia si můžete pročíst, [jak se s ním nastavují řádky a sloupce layoutu](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). diff --git a/html-a-css/bem-a-responzivni-design/mobile-first.md b/html-a-css/bem-a-responzivni-design/mobile-first.md index 444ab435..8bfe66b1 100644 --- a/html-a-css/bem-a-responzivni-design/mobile-first.md +++ b/html-a-css/bem-a-responzivni-design/mobile-first.md @@ -1,6 +1,6 @@ ## Mobile first -Správný postup, jak navrhovat a kódovat responzivní webové stránky je začít od mobilních zařízení, a teprve potom přidávat styly pro větší zařízení. Proč bychom měli postupovat tímto způsobem? +Správný přístup, jak navrhovat a kódovat responzivní webové stránky je začít od mobilních zařízení, a teprve potom přidávat styly pro větší zařízení. Proč bychom měli postupovat tímto způsobem? ### Nějaká ta čísla diff --git a/html-a-css/responzivni-design/responsive-theory.md b/html-a-css/responzivni-design/responsive-theory.md index 60a17fa5..6c7052ba 100644 --- a/html-a-css/responzivni-design/responsive-theory.md +++ b/html-a-css/responzivni-design/responsive-theory.md @@ -17,18 +17,15 @@ img { } ``` -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`. +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 { max-width: 100%; + width: 500px; } ``` -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/).