HTML va Responsiv Dizayn — Advanced

Responsiv dizayn nima?

Responsiv dizayn — veb-sahifaning har qanday qurilmada to‘g‘ri va chiroyli ko‘rinishini ta’minlash.

1. Viewport meta tegi

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2. Flexbox va Grid

<!-- Flexbox misol -->
<div style="display: flex; gap: 1rem;">
  <div>Blok 1</div>
  <div>Blok 2</div>
</div>

<!-- CSS Grid misol -->
<div style="display: grid; grid-template-columns: 1fr 2fr;">
  <div>Chap panel</div>
  <div>Asosiy kontent</div>
</div>

3. Media queries

/* Mobil uchun */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .sidebar {
    display: none;
  }
}

/* Katta ekran uchun */
@media (min-width: 601px) {
  body {
    font-size: 20px;
  }
  .sidebar {
    display: block;
  }
}

4. Rasm va kontentni moslashtirish

<img
  src="img.jpg"
  style="max-width: 100%; height: auto;"
  alt="Responsiv rasm"
/>

5. Mobil-first yondashuv

Dizaynni avval mobil uchun, keyin esa katta ekranlar uchun kengaytiring.

Foydali resurslar

• MDN Responsive Design
• CSS Tricks: Flexbox
• CSS Tricks: Grid