Responzivní škálování citací

Jak zajistit, aby zvýrazněné citáty vypadaly dobře na všech zařízeních. Pokročilé CSS techniky pro mobilní a desktopové obrazovky.

10 min čtení Pokročilý Březen 2026

Mobilní telefon na dřevěném stole s responzivním designem, text je čitelný na úzkých obrazovkách

Autor

Petr Novotný

Vedoucí oddělení typografického designu

Web designer se 14 lety praxe zaměřený na typografii a design zvýrazněných citací v longformátovém obsahu.

Proč je škálování důležité

Zvýrazněné citáty jsou mocný nástroj v designu dlouhého textu. Ale zde je věc — když se čtenář přesune z desktopového počítače na mobilní telefon, často se design rozpadne. Text, který vypadá elegantně na 24palcovém monitoru, se může stát nečitelným na displeji o šířce pěti palců.

Klíčová je myšlenka, kterou musíme pochopit: citáty nejsou jen zdobení. Slouží k přerušení monotónnosti textu a zdůraznění důležitých myšlenek. To znamená, že se musí škálovat inteligentně. Ne prostě se zmenšit — to by je zbavilo veškeré vizuální váhy.

Laptop a tablet vedle sebe, každý zobrazuje stejný obsah s citáty v různých velikostech

Základní princip

Citáty by se měly škálovat pomocí relativních jednotek, nikoli fixních pixelů. Klíč spočívá v používání clamp() funkce, která umožňuje prvkům dynamicky se přizpůsobit mezi minimální a maximální velikostí.

Praktické řešení

Místo psaní více media queries stačí jeden CSS řádek: font-size: clamp(1.25rem, 4vw, 2.5rem); Citáty se teď přizpůsobí všem velikostem okna bez zbytečného kódu.

CSS techniky pro dynamické škálování

Máme několik přístupů. Nejstarší je pomocí media queries — píšeme jiné velikosti pro mobil, tablet a desktop. Funguje to, ale vytváří spoustu kódu. Lepší je použít flexibilnější metody.

Viewport width jednotky (vw) jsou skvělé pro responzivitu. Když nastavíte font-size: 5vw , velikost písma se mění spolu se šířkou okna. Ale bez limitů to může skončit příliš velkým nebo příliš malým textem.

Proto přichází clamp() — moderní CSS funkce, která říká: “Nech prvek růst s viewportem, ale jen mezi těmito hranicemi.” Má tři argumenty: minimální velikost, preferovaná velikost a maximální velikost. Je to jako nastavení bezpečnostních pálek kolem dynamického škálování.

CSS kód v editoru s zvýrazněnou clamp funkcí a barevnými komentáři vysvětlujícími jednotlivé parametry

Dvě vizualizace citace vedle sebe: vlevo mobilní verze s úzkým rozpětím, vpravo desktopová verze se širokým rozpětím

Padding a okraje se také musí škálovat

Není to jen o velikosti textu. Prostor kolem citátu je stejně důležitý. Když máte citát s pevným paddingem 2rem na všech zařízeních, na malých obrazovkách se zdá nepoměrně velký. Na velkých obrazovkách zase příliš malý.

Řešení? Používejte clamp() i pro padding. Tak se okraje přizpůsobí viewport, stejně jako text. Typicky byste měli minimální padding 1rem na mobilech a 2rem na desktopu. S clamp se to řeší jednoduchou linkou: padding: clamp(1rem, 3vw, 2rem);

Tenhle přístup vytváří harmonický vztah mezi textem a prostorem. Všechno roste a klesá v souladu. Čtenář to necítí, ale podvědomě to vnímá — design se jeví konzistentní a promyšlený.

Tloušťka okrajů a dekorativní prvky

Mnohé citáty mají nějaký vizuální akcent — barevný levý okraj, horní linku nebo dekorativní symboly. Tyto prvky také potřebují škálování.

Levý okraj (border-left)

Na desktopu často 5-8px, na mobilech stačí 3-4px. S media queries se to zvládá snadno. Na mobilu se redukuje bez ztráty vizuálního efektu.

Uvozovky a symboly

Velké dekorativní uvozovky se musí taky přizpůsobit. Použijte relativní jednotky (em nebo rem) místo px. Když se změní font-size citátu, uvozovky se změní s ním.

Pozadí a box-shadow

Stíny se škálují pomocí clamp taky. Menší stín na mobilech, větší na desktopu. To vytváří konsistentní hloubku v designu bez ohledu na zařízení.

Mezery mezi prvky

Gap mezi citátem a textem před ním — nebo za ním — také potřebuje flexibilitu. Clamp umožňuje zvětšit vizuální separaci na větších obrazovkách bez nutnosti psát media queries.

Příklady z praxe

Jak to vypadá v reálném kódu? Tady je jednoduchý příklad responzivního citátu:

CSS pro citát:

blockquote { font-size: clamp(1.25rem, 4vw, 2rem); padding: clamp(1.5rem, 4vw, 2.5rem); border-left: clamp(3px, 0.5vw, 8px) solid #e11d48; margin: clamp(2rem, 5vw, 3rem) 0; }

Tenhle kód dělá: text se mění od 1.25rem do 2rem podle viewport; padding od 1.5rem do 2.5rem; levý okraj od 3px do 8px. Všechno je elegantně propojené. Na mobilu vypadá proporcionálně, na desktopu také. Bez jediné media query.

Závěr: Škálování není zbytečnost

Responzivní škálování zvýrazněných citací není technická záležitost — je to součást dobrého designu. Když se citáty přizpůsobují zařízení inteligentně, čtenář je lépe vníma. Text zůstává čitelný, design zůstává proporcionální, a celý obsah terá lépe.

Klíč je používat moderní CSS nástroje. Clamp je tu pro nás — vděčme za to. Místo desítek řádků media queries píšeme jednoduchou funkci. A výsledek? Citáty, které vypadají skvěle všude.

Poznámka: Informace v tomto článku jsou určeny pro vzdělávací účely. CSS techniky se vyvíjejí a kompatibilita s prohlížeči se může měnit. Vždy testujte svůj kód na více zařízeních a prohlížečích. Konkrétní čísla v příkladech mohou vyžadovat úpravu podle vašeho konkrétního designu a obsahu.