Fluidní rozložení místo fixních šířek

Proč fixní šířky už nepatří do moderního webdesignu. Fluidní jednotky a relativní velikosti vám ušetří čas a vytvářejí lépe vypadající stránky.

9 min čtení Střední Březen 2026

Různá zařízení zobrazující stejný web — telefon, tablet a desktop počítač s responzivním rozložením

Fixní šířky jsou minulostí

Pamatujete na doby, kdy se všechny webové stránky navrhly na přesnou šířku 960 pixelů? To je už pryč. Dnes máme tablety, mobily s různými úhlopříčkami, ultra-wide monitory a chytré televizory. Fixní šířky v tomto světě prostě nefungují.

Fluidní rozložení není nový koncept, ale mnoho vývojářů si stále vybírá staré návyky. Výsledek? Stránky, které na mobilech vypadají zle nebo mají příliš dlouhé řádky na desktopu. Není to vina mobilů nebo velkých obrazovek — je to vina špatného návrhu.

Počítač s otevřeným kódem CSS zobrazující fluidní jednotky jako procenta a em

Proč se mění pravidla

Fluidní jednotky fungují úplně jinak. Místo toho, aby byly prvky na stránce fixně nastaveny na 320px, 680px nebo 960px, mohou být relativní — vůči své nadřazené položce, vůči velikosti obrazovky nebo vůči základní velikosti písma.

To znamená, že máte méně media queries. Často stačí jednoduše napsat CSS a ono se automaticky přizpůsobí. Na 375px telefonu? Funguje. Na 768px tabletu? Funguje. Na 1920px monitoru? Taky funguje. Bez složitého ladění pro každou velikost.

Konkrétní příklad: Když nastavíte šířku kontejneru na max-width: clamp(320px, 90vw, 1200px) , automaticky se přizpůsobí — 90 % šířky obrazovky, ale nikdy menší než 320px a nikdy větší než 1200px. Bez jediné media query.

Jak na fluidní rozložení

Existují čtyři hlavní jednotky, které vám budou sloužit.

Procenta (%)

Nejjednoduššího řešení. Šířka je vždy relativní vůči rodiči. Když je rodič 500px, 50% znamená 250px. Není to absolutní hodnota — je to proporce. Perfektní pro flexbox gridy.

Viewport jednotky (vw, vh)

1vw = 1 % šířky okna. Na mobilu s 375px je 10vw = 37,5px. Na desktopu s 1920px je to 192px. Skvělé pro hero sekce a plně responzivní typografii bez media queries.

Em a Rem

Em je relativní vůči velikosti písma prvku. Rem je relativní vůči velikosti písma root elementu (html tag). Máte-li html s 16px a nastavíte padding: 1.5rem, dostanete 24px. Měňte jen velikost písma a všechno se přizpůsobí.

Funkce clamp()

Nejsilnější z nich. clamp(min, preferred, max) zajistí, aby hodnota nikdy nespadla pod minimum a nepřekročila maximum. Při tom měnit s velikostí obrazovky. Jedna hodnota nahradí tisíc media queries.

Praktické příklady z reálného světa

Vezměte si typickou web stránku. Máte header, content area a sidebar. Na mobilu je sidebar pod obsahem. Na desktopu je vedle. S fluidním rozložením to zvládnete elegantně.

Hlavní kontejner s fluidní šířkou:

max-width: clamp(300px, 90vw, 1200px);
padding: clamp(1rem, 3vw, 2rem);

Na 320px telefonu? Máte 90 % šířky, ale minimálně 300px. Na 768px tabletu? 90 % z 768px = 691px. Na 1920px? Zastaví se na 1200px. Padding se také mění — na malých obrazovkách 1rem, na velkých až 2rem. Bez jediné media query.

Neznamená to, že media queries už nepotřebujete — někdy jsou nezbytné. Ale počet jich drasticky klesne. Místo pěti media queries pro různé breakpointy máte tři nebo čtyři pro zásadní změny layoutu.

Kód CSS s příklady clamp() funkcí a relativních jednotek v editoru s zvýrazněním syntaxe

Co získáte

Fluidní rozložení vám přináší tři konkrétní výhody. Zaprvé, váš CSS bude čistší. Méně řádků kódu, méně media queries, méně údržby. Zadruhé, stránka se bude lépe chovat na všech zařízeních — není to optimalizované jen pro pár velikostí, ale funguje hladce všude.

Zatřetí, budoucnost je za vámi. Když příjde nové zařízení s nezvyklou velikostí obrazovky, váš design se přirozeně přizpůsobí. Nebudete muset přidávat nové media queries pro každý nový telefon na trhu.

Méně CSS kódu a méně údržby
Lepší výkon — menší soubory stylů
Hladký přechod mezi všemi velikostmi zařízení
Lepší uživatelský dojem na všech displejích
Jednodušší onboarding pro nové vývojáře

Vývojář s úsměvem ukazuje na monitor s responzivní webovou stránkou na více zařízeních najednou

Na co si dát pozor

Fluidní rozložení není všelék. Je pár věcí, které vám můžou zkomplikovat život, když se jich nedržíte.

Příliš malé a příliš velké

Někdy se stane, že na ultra-malém mobilu (320px) se váš obsah stane nečitelný nebo na ultra-širokém monitoru (3840px) je řádek příliš dlouhý. Proto existuje minimum a maximum v clamp(). Nastavte je rozumně. 1200px je obvykle bezpečná maximální šířka pro čitelnost textu.

Obrázky se chování liší

Obrázky potřebují speciální péči. Když nastavíte width: 100% , rozmaznají se na velkých obrazovkách. Používejte max-width a object-fit: cover . Také zvažte různé formáty pro různé velikosti — webp pro moderní prohlížeče, jpg fallback pro staré.

Typografie potřebuje víc než jen clamp()

Fluidní typografie je skvělá, ale někdy je potřeba přidat media query. Na velmi malých obrazovkách může být text z clamp() příliš malý, na velmi velkých příliš velký. Kombinujte clamp() s media queries pro dokonalý výsledek.

Čas se změnit

Fixní šířky patří do minulosti. Dnes máme lepší nástroje — procenta, viewport jednotky, em a rem, a především clamp(). Tyto nástroje vám umožní psát CSS, který se sám přizpůsobí jakékoliv velikosti obrazovky bez zbytečných media queries.

Není to složité. Začněte s jedním projektem — zkuste nahradit pár fixních šířek fluidními. Uvidíte, jak se vám kód zjednoduší. A vaši uživatelé budou šťastní, protože jejich obsah bude vypadat dobře všude.

Připraven vyzkoušet?

Fluidní rozložení se nejlépe učí praxí. Vezměte si jeden ze svých starších projektů a zkuste ho přepsat bez fixních šířek.

Prozkoumat další články

Poznámka k kompatibilitě

Funkce clamp() a viewport jednotky jsou podporovány všemi moderními prohlížeči (Chrome, Firefox, Safari, Edge). Pokud musíte podporovat Internet Explorer nebo velmi staré prohlížeče, budete muset používat fallback hodnoty nebo media queries. Pro současné webové projekty (2026 a dál) není to problém.