skrabanek
/
3I_WTL_2025
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Malý repozitář pro WTL 3.I 2025/2026
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 Commits
1 Branch
0 Tags
4.8 MiB
 
 
 
Tree: 22ec18730f
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '22ec18730f'
${ noResults }
3I_WTL_2025/09_mediaquerry
skrabanek 22ec18730f
add AI material navíc, README popisky všude 		1 week ago
..
img media queries 3 months ago
README.md add AI material navíc, README popisky všude 1 week ago
index.html media queries 3 months ago
style.css media queries 3 months ago

README.md

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 - DŮLEŽITÝ viewport meta tag! -->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

/* 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/ai_01_grid_responsive - praktický projekt s responzivitou