# 09 - Media Queries a Responzivní Design ## 🎯 Co se naučíte V této lekci se naučíte vytvářet responzivní webové stránky pomocí media queries. ## 📚 Témata lekce - **Media Queries** - CSS pravidla pro různé velikosti obrazovek - **Viewport meta tag** - důležitý pro responzivitu - **Breakpointy** - body zlomu pro různá zařízení - **Mobile-first přístup** vs Desktop-first - **Responzivní obrázky** - přizpůsobení velikosti - **Responzivní layout** - změna rozvržení podle velikosti ## 📂 Soubory v projektu - `index.html` - HTML s viewport meta tagem - `style.css` - CSS s media queries - `img/` - složka s obrázky ## 💻 Ukázka z lekce ```html ``` ```css /* CSS - Media Queries */ /* Desktop styly (výchozí) */ .col-6 { width: 50%; float: left; } /* Tablet (do 768px) */ @media (max-width: 768px) { .col-6 { width: 100%; } } /* Mobil (do 480px) */ @media (max-width: 480px) { .col-6 { width: 100%; } body { font-size: 14px; } } ``` ## 🚀 Jak s lekcí pracovat 1. Otevřete `index.html` v prohlížeči 2. Otevřete **Developer Tools** (F12) a zapněte **Device Toolbar** (Ctrl+Shift+M) 3. Změňte velikost okna nebo vyberte různá zařízení (iPhone, iPad, Desktop) 4. Sledujte, jak se mění layout při různých velikostech 5. Prozkoumejte `style.css` - najděte `@media` pravidla 6. Zkuste přidat vlastní breakpointy a změny stylů ## 💡 Tip pro studenty - **VŽDY použijte viewport meta tag** - bez něj responzivita na mobilu nebude fungovat! - **Breakpointy** (běžné hodnoty): - Mobil: `max-width: 480px` - Tablet: `max-width: 768px` - Desktop: `min-width: 769px` nebo bez media query - **Mobile-first** přístup (doporučený): - Výchozí styly pro mobil - Media queries s `min-width` pro větší obrazovky - **Desktop-first** přístup: - Výchozí styly pro desktop - Media queries s `max-width` pro menší obrazovky - Testujte na **reálných zařízeních**, ne jen v prohlížeči ## 📱 Testování responzivity **V prohlížeči:** 1. F12 → Device Toolbar (Ctrl+Shift+M) 2. Vyberte zařízení nebo nastavte vlastní rozměry 3. Otočte zařízení (landscape/portrait) **Běžné rozlišení:** - iPhone: 375px × 667px - iPad: 768px × 1024px - Desktop: 1920px × 1080px ## 🔗 Související lekce - **Předchozí:** 08_js_form - JavaScript a formuláře - **Další:** 10_flex - Flexbox layout - **Související:** - 12_grid - CSS Grid (další layout systém) - AI_extra_material/ai_01_grid_responsive - praktický projekt s responzivitou