Responsive Design: Web, který dýchá

Feb 16, 2026

Únor 2026

Dnešní internet se odehrává na mobilech, tabletech i obřích monitorech. Tento týden jsem se proto ponořil do Responsive Designu, abych přestal bojovat s fixními šířkami a začal tvořit weby, které se přizpůsobí čemukoliv.

Hlavní lekce? Web je přirozeně responzivní už v základu – to my vývojáři ho občas rozbijeme tím, že věcem nastavíme pevné rozměry v pixelech.

Co jsem se naučil?

Tady je shrnutí klíčových konceptů z posledních lekcí:

• Natural Responsiveness: Pochopení, jak se blokové elementy chovají samy o sobě a proč je lepší používat relativní jednotky (%, em, rem, vw/vh) místo fixních px.
• Responsive Images: Obrázky nesmí “přetékat” z displeje. Používání vlastností jako max-width: 100% je absolutní základ pro každý moderní web.
• Media Queries: Moje nová superschopnost. Díky nim můžu měnit layout stránky podle šířky obrazovky – například z třísloupcového výpisu na mobilu udělat jeden přehledný sloupec.
• Project Homepage: Všechny tyhle znalosti jsem spojil při tvorbě responzivní úvodní stránky, která vypadá skvěle na iPhonu i na desktopu.

Ukázka Media Query

Místo fixování šířky teď definuji body zlomu (breakpoints), kde se design adaptuje:

/* Základní styl pro mobily (Mobile First) */
.container {
  display: flex;
  flex-direction: column;
}

/* Úprava pro tablety a větší obrazovky */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    justify-content: space-between;
  }
}