Responzivita
& Media Queries

Mobile First — správná filozofie

Existují dva přístupy k responzivitě. Mobile First je dnes standardem a z dobrých důvodů:

/* ❌ Desktop First — špatně */
.menu { display: flex; }          /* výchozí: flex (desktop) */
@media (max-width: 768px) {
  .menu { display: none; }        /* skryjeme na mobilu */
}

/* ✅ Mobile First — správně */
.menu { display: none; }          /* výchozí: skryté (mobil) */
@media (min-width: 768px) {
  .menu { display: flex; }        /* zobrazíme na desktopu */
}Kopírovat

Viewport meta tag

Bez tohoto tagu mobilní prohlížeče simulují desktopovou šířku (obvykle 980px) a stránka vypadá zmenšeně. Toto je první řádek každého responzivního projektu:

<!-- POVINNÉ pro každý responzivní web -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* width=device-width  → šířka = skutečná šířka zařízení
   initial-scale=1.0   → výchozí zoom = 100%             */

/* Méně časté parametry (obecně nedoporučované): */
/* maximum-scale=1.0   → zakáže zoom (špatné pro a11y!) */
/* user-scalable=no    → zakáže zoom (NIKDY nepoužívat!) */Kopírovat

Standardní breakpointy

Tyto hodnoty odpovídají Tailwind CSS breakpointům — de facto standardu v moderním vývoji.

Media Queries

Media queries aplikují CSS podmíněně — na základě vlastností zařízení nebo viewportu.

/* Základní syntaxe */
@media (min-width: 768px) { /* tablet a výše */ }
@media (max-width: 767px) { /* pouze mobil */ }
@media (min-width: 768px) and (max-width: 1023px) { /* pouze tablet */ }

/* Typ média */
@media screen { /* obrazovky */ }
@media print  { /* tisk */ }

/* Moderní media features */
@media (orientation: landscape) { /* na šířku */ }
@media (prefers-color-scheme: dark) { /* tmavý režim! */ }
@media (prefers-reduced-motion: reduce) {
  /* Vypnout animace pro uživatele s epilepsií atd. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
@media (hover: none) { /* dotykové zařízení, bez myši */ }
@media (min-resolution: 2dppx) { /* Retina displeje */ }Kopírovat

Tmavý režim (prefers-color-scheme)

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f0f0f0;
  }
  /* Ostatní CSS automaticky použije přepsané proměnné! */
}Kopírovat

Responzivní CSS jednotky

Výběr správné jednotky je klíčový pro responzivní design. Každá má svůj účel:

/* Zlatý tip: základní spacing systém v rem */
:root { font-size: 16px; } /* 1rem = 16px */

/* Spacing scale */
--space-1: 0.25rem;  /*  4px */
--space-2: 0.5rem;   /*  8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-12: 3rem;    /* 48px */

/* max-width pro čitelnost textu */
.article-content { max-width: 65ch; }Kopírovat

Fluid Typography s clamp()

Funkce clamp(min, preferred, max) je nejelegantnější způsob, jak vytvořit typografii, která plynule škáluje s šířkou viewportu — bez media queries:

/* clamp(minimum, ideální, maximum) */
font-size: clamp(1rem, 2.5vw, 1.5rem);
/* = nejméně 16px, ideálně 2.5% šířky, nejvýše 24px */

/* Praktická typografická škála */
:root {
  --text-sm:   clamp(0.75rem,  1.5vw, 0.875rem);
  --text-base: clamp(1rem,     2vw,   1.125rem);
  --text-lg:   clamp(1.125rem, 2.5vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  3vw,   1.5rem);
  --text-2xl:  clamp(1.5rem,   4vw,   2rem);
  --text-3xl:  clamp(1.875rem, 5vw,   2.5rem);
  --text-4xl:  clamp(2.25rem,  6vw,   3.5rem);
}

/* Fluid spacing */
padding: clamp(1rem, 5vw, 3rem);
gap: clamp(0.75rem, 2vw, 1.5rem);Kopírovat

Responzivní obrázky

Obrázky jsou největší zátěž stránky. Správná implementace zlepšuje výkon a vizuální kvalitu na všech zařízeních.

Základní responzivní obrázek

/* Zlatý základ — obrázek nikdy nepřeteče kontejner */
img {
  max-width: 100%;
  height: auto;
  display: block;
}Kopírovat

srcset — různé rozlišení

<!-- Prohlížeč vybere nejlepší velikost automaticky -->
<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w,
          foto-800.jpg 800w,
          foto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Popis obrázku"
  loading="lazy"
  width="800" height="600"
>Kopírovat

picture — různé formáty a art direction

<picture>
  <!-- Moderní formáty (menší velikost, lepší kvalita) -->
  <source type="image/avif" srcset="foto.avif">
  <source type="image/webp" srcset="foto.webp">

  <!-- Art direction: jiný výřez na mobilu -->
  <source media="(max-width: 600px)" srcset="foto-mobile.jpg">
  <source media="(min-width: 601px)" srcset="foto-desktop.jpg">

  <!-- Fallback pro starší prohlížeče -->
  <img src="foto.jpg" alt="Popis" loading="lazy">
</picture>Kopírovat

object-fit pro obrázky v kontejnerech

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;   /* ořízne, zachová poměr */
  object-fit: contain; /* celý obrázek, s mezerami */
  object-position: center top; /* zaměření na horní část */
}Kopírovat

Praktické cvičení

Vytvořte Mobile First responzivní stránku: na mobilu jednosloupec (karty přes celou šířku, hamburger menu), od 640px dvousloupcové karty, od 1024px třísloupcové karty a viditelná navigace. Použijte clamp() pro typografii.

Taháček — rychlá reference

Mobile First šablona

/* Výchozí: mobil */
.element { font-size: 1rem; }

/* Tablet (640px+) */
@media (min-width: 640px)  { .element { font-size: 1.1rem; } }

/* Desktop (1024px+) */
@media (min-width: 1024px) { .element { font-size: 1.2rem; } }

/* Tmavý režim */
@media (prefers-color-scheme: dark) { :root { --bg: #111; } }

/* Bez animací */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}Kopírovat

Fluid hodnoty s clamp()

font-size: clamp(1rem, 2.5vw, 1.5rem);
padding:   clamp(1rem, 5vw,   3rem);
gap:       clamp(0.75rem, 2vw, 1.5rem);Kopírovat

Obrázky

img { max-width: 100%; height: auto; display: block; }
.card-img { width: 100%; height: 200px; object-fit: cover; }
<img loading="lazy" width="800" height="600" alt="...">Kopírovat