DarslarWeb dasturlash

Media Responsive — chuqurroq

Responsive rasmlar, moslashuvchi grid va flex, mobile menyu va dark/light tema orqali zamonaviy saytlar qurish.

45 daqiqa

CSS Advanced — Dars 17

Responsive — chuqurroq

Endi faqat matn emas — butun layout, rasmlar va menyu ham telefonda chiroyli bo'lsin.

gridobject-fithamburgerprefers-color-scheme

Dars rejasi

6 ta mavzu

01Responsive rasmlar
02Responsive grid (auto-fit)
03Flex va wrap
04Mobile menyu (hamburger)
05prefers-color-scheme — dark mode
06Responsive layout — blog skeleton

1. Responsive rasmlar

Oddiy rasm telefonda chetdan chiqib ketishi mumkin. Yechim — rasmga max-width: 100% va height: auto berish.

1img {
2  max-width: 100%;   /* konteynerdan chiqmaydi */
3  height: auto;      /* nisbat saqlanadi */
4  display: block;
5}

1.avatar {
2  width: 80px;
3  height: 80px;
4  border-radius: 50%;
5  object-fit: cover;       /* proporsiya saqlanadi, kesiladi */
6  object-position: center; /* markazga fokuslanadi */
7}

object-fit farqi

HTML

Natijajonli

2. Responsive grid — auto-fit siri

Eng kuchli responsive hiyla: grid-template-columns'da repeat(auto-fit, minmax(...)) ishlatish. @media ham kerak emas — grid o'zi ustunlarni sozlaydi.

1.wrap {
2  display: grid;
3  gap: 16px;
4  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
5}
6
7/*
8  auto-fit       — imkon qadar ko'p ustun qo'yadi
9  minmax(240px,1fr) — har bir ustun kamida 240px, bo'lsa ortiqchasini bir xil bo'ladi
10*/

Sehrli grid — preview eniga qarang

HTML

Natijajonli

3. Flex va wrap

flex-wrap: wrap — elementlar konteynerga sig'masa, avtomatik pastga tushadi. Responsive navbar yoki tag ro'yxatlari uchun juda qulay.

1.teglar {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 10px;
5}
6
7.teg {
8  flex: 1 1 120px;  /* o'sishi mumkin, qisqarishi mumkin, boshlang'ich 120px */
9}

Flex wrap — taglar ro'yxati

HTML

Natijajonli

Desktop'da menyu yonma-yon, telefonda esa hamburger tugmasi bosilganda ochiladi. CSS-only variant — checkbox hiylasi bilan JavaScriptsiz ham ishlaydi.

CSS-only hamburger menyu

HTML

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
  }
  .logo { font-weight: 800; }

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
  }
  nav a {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
  }
  nav a:hover { color: #0f172a; }

#menu-toggle { display: none; }
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
  }
  .hamburger span {
    width: 24px;
    height: 2px;
    background: #0f172a;
    border-radius: 2px;
    transition: all 0.3s;
  }

@media (max-width: 640px) {
    .hamburger { display: flex; }

nav ul {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      background: white;
      padding: 16px 20px;
      border-bottom: 1px solid #e2e8f0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s;
    }

#menu-toggle:checked ~ nav ul {
      max-height: 240px;
    }
  }
</style>

<nav>
    <ul>
      <li><a href="#">Bosh</a></li>
      <li><a href="#">Xizmatlar</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Aloqa</a></li>
    </ul>
  </nav>
</header>

<main style="padding: 30px 20px; color: #475569;">
  <p>Preview enini 640px dan kichraytiring — hamburger paydo bo'ladi. Uni bosib ko'ring.</p>
</main>

Natijajonli

5. prefers-color-scheme — avtomatik dark mode

Zamonaviy qurilmalarda foydalanuvchi tizimda dark yoki light tema tanlaydi. @media (prefers-color-scheme: dark) — saytingiz uni aniqlab, avtomatik moslashadi.

1:root {
2  --bg: #ffffff;
3  --text: #0f172a;
4  --card: #f8fafc;
5}
6
7@media (prefers-color-scheme: dark) {
8  :root {
9    --bg: #0f172a;
10    --text: #f1f5f9;
11    --card: #1e293b;
12  }
13}
14
15body { background: var(--bg); color: var(--text); }
16.card { background: var(--card); }

6. Responsive layout — blog skeleton

Endi hammasini birlashtiraylik: telefonda bitta ustun, tablet'da ikki, noutbukda uch ustun bo'lgan to'liq blog layout.

To'liq responsive blog layout

HTML

header {
    background: #0f172a;
    color: white;
    padding: clamp(24px, 5vw, 56px) 20px;
    text-align: center;
  }
  header h1 {
    margin: 0 0 8px;
    font-size: clamp(24px, 4vw, 44px);
  }
  header p {
    color: #cbd5e1;
    margin: 0;
    font-size: clamp(13px, 1.5vw, 16px);
  }

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

article {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: transform 0.3s;
  }
  article:hover { transform: translateY(-4px); }
  article img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
  }
  .body { padding: 16px 18px; }
  .body h3 { margin: 0 0 6px; font-size: 17px; }
  .body p { margin: 0; color: #64748b; font-size: 14px; }

footer {
    text-align: center;
    padding: 20px;
    color: #64748b;
    font-size: 13px;
    border-top: 1px solid #e2e8f0;
  }
</style>

<header>
  <h1>Dev Blog</h1>
  <p>Har qanday ekranda chiroyli — kichraytirib ko'ring</p>
</header>

<main>
  <article>
    <img src="https://picsum.photos/seed/b1/500/300" alt="">
    <div class="body"><h3>CSS Grid asoslari</h3><p>Zamonaviy layout qurish.</p></div>
  </article>
  <article>
    <img src="https://picsum.photos/seed/b2/500/300" alt="">
    <div class="body"><h3>Flexbox sirlari</h3><p>Elementlarni tartiblashning sehri.</p></div>
  </article>
  <article>
    <img src="https://picsum.photos/seed/b3/500/300" alt="">
    <div class="body"><h3>Responsive typography</h3><p>clamp() bilan moslashuvchan matn.</p></div>
  </article>
  <article>
    <img src="https://picsum.photos/seed/b4/500/300" alt="">
    <div class="body"><h3>Dark mode</h3><p>CSS o'zgaruvchilari bilan oson.</p></div>
  </article>
</main>

Natijajonli

Kichik test

0 / 4

1.Rasm konteynerdan chiqib ketmasligi uchun?

2.@media yozmay responsive grid qilish uchun?

3.prefers-color-scheme — bu nima?

4.Rasm quti o'lchamini to'ldirsin, cho'zilmasdan kesilsin — qaysi xossa?

Mustaqil ish

0 / 5

Responsive — chuqurroq

1. Responsive rasmlar

2. Responsive grid — auto-fit siri

3. Flex va wrap

4. Mobile menyu — hamburger

5. prefers-color-scheme — avtomatik dark mode

6. Responsive layout — blog skeleton

Mustaqil ish