МОДУЛ 04 / УРОК 08

Media Queries и Mobile-First дизайн

Научи как един уебсайт се адаптира към различни екрани. Използвай CSS Media Queries, за да създаваш оформления, които работят на телефон, таблет и десктоп.

HTML & CSSИнтерактивен урок12. клас

01 / НАУЧИ

Какво е Responsive Design?

Responsive Design е подход за изграждане на уебстраници, които се приспособяват към различни размери на екрана. Вместо отделен сайт за телефон и компютър, създаваме едно оформление, което се променя според наличното пространство.

Viewport е видимата област, в която браузърът показва уебстраницата. CSS Media Queries позволяват да прилагаме различни стилове според характеристиките на тази област, например нейната ширина.

Какво означава Mobile-First?

При Mobile-First първо създаваме стиловете за малък екран. След това използваме min-width, за да разширяваме оформлението при по-големи ширини.

В този урок използваме примерни breakpoint-и при 600px и 900px. Те не са универсални граници за всички устройства — избираме ги според нуждите на конкретното оформление.

За правилно мащабиране на мобилни устройства HTML документът обикновено съдържа <meta name="viewport" content="width=device-width, initial-scale=1">.

CSS / MOBILE FIRST

От една към три колони

Базовите стилове са за телефон. При по-широк екран Media Queries добавят нови колони.

.gallery {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

02 / РАЗГЛЕДАЙ

Responsive Playground

Превключвай между телефон, таблет и десктоп или променяй ширината с плъзгача. Наблюдавай как CSS Media Queries променят броя на колоните.

320 px600 px · Tablet900 px · Desktop1200 px

CSS / Mobile First

03 / ПРОМЕНИ

Експериментирай с адаптивна навигация

Разгледай началните стилове за мобилен екран. Промени breakpoint-а от 600px на800px и наблюдавай кога навигацията преминава от вертикална към хоризонтална.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<header class="site-header">
  <h1>Моят уебсайт</h1>
  <nav>
    <a href="#home">Начало</a>
    <a href="#projects">Проекти</a>
    <a href="#contact">Контакти</a>
  </nav>
</header>

<main>
  <h2>Responsive Design</h2>
  <p>Промени ширината на визуализацията.</p>
</main>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #eef2f8;
  color: #182235;
}

.site-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #182235;
  color: white;
}

.site-header nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-header a {
  color: white;
  text-decoration: none;
}

main {
  padding: 24px;
}

/* Mobile First: започваме с малкия екран. */

@media (min-width: 600px) {
  .site-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .site-header nav {
    flex-direction: row;
  }
}

04 / СЪЗДАЙ

Създай адаптивна галерия

Използвай CSS Grid и Mobile-First подхода, за да направиш галерия, която се адаптира към ширината на екрана. Запази съществуващата HTML структура.

Изисквания към задачата

Използвай display: grid за .gallery.
На мобилен екран използвай 1fr — една колона.
При min-width: 600px използвай две колони.
При min-width: 900px използвай три колони.
Запази gap: 16px между картите.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<main class="portfolio">
  <h1>Моето портфолио</h1>
  <p>Разгледай моите проекти.</p>

  <section class="gallery">
    <article class="card">
      <div class="card-image">01</div>
      <h2>HTML</h2>
      <p>Структура на уебстраница</p>
    </article>

    <article class="card">
      <div class="card-image">02</div>
      <h2>CSS</h2>
      <p>Стилове и оформление</p>
    </article>

    <article class="card">
      <div class="card-image">03</div>
      <h2>Responsive</h2>
      <p>Адаптивен уебдизайн</p>
    </article>
  </section>
</main>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
  color: #182235;
}

.portfolio {
  max-width: 1100px;
  margin: 0 auto;
}

.gallery {
  display: grid;
  gap: 16px;
}

.card {
  padding: 16px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 18px #18223512;
}

.card-image {
  display: grid;
  place-items: center;
  height: 100px;
  border-radius: 8px;
  background: #d52f38;
  color: white;
  font-size: 28px;
  font-weight: bold;
}

/*
  ЗАДАЧА — MOBILE FIRST

  1. На мобилен екран .gallery да има 1 колона.
  2. При min-width: 600px да има 2 колони.
  3. При min-width: 900px да има 3 колони.
  4. Използвай CSS Grid.
  5. Запази разстоянието gap: 16px.
*/

05 / ПРОВЕРИ

Провери петте изисквания към адаптивната галерия.

Резултатите ще се появят тук след проверката.