Responsive sahifa — har qanday ekran o'lchamida (telefon, planshet, kompyuter) to'g'ri ko'rinadigan sahifa demakdir. Bugungi kunda bu majburiy talab, ixtiyoriy emas.

Viewport meta tegi

Har bir responsive sahifa shu tegdan boshlanadi:

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

Flexbox bilan tartiblash

.konteyner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.karta {
  flex: 1 1 300px;
}

flex-wrap: wrap orqali elementlar kichik ekranda avtomatik pastga tushadi.

Media query bilan ekran o'lchamiga moslash

@media (max-width: 768px) {
  .menu {
    display: none;
  }
  .mobil-menu {
    display: block;
  }
}

Maslahat: Sahifani avval mobil versiyasi uchun loyihalashtiring (mobile-first), keyin katta ekranlar uchun kengaytiring.