Responsive asoslari

Responsive dizayn — sahifa har qanday ekranda yaxshi ko'rinishini anglatadi — telefon, planshet yoki keng ish stoli monitorida. Alohida saytlar qurish o'rniga siz moslashadigan bitta joylashuv yozasiz. Mana asosiy vositalar.

viewport meta teg

Ushbu bir qator HTML <head> ingizga kiradi va juda muhim. Usiz telefonlar keng ish stoli kabi ko'rinib, sahifangizni sig'dirish uchun kichraytiradi va hamma narsani kichik qiladi.

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

U brauzerga aytadi: "qurilmaning haqiqiy kengligidan foydalan va uzoqlashtirma." Har doim uni kiriting. Responsive CSS usiz deyarli ishlamaydi.

Mobile-first fikrlash

Mobile-first — siz asosiy uslublaringizni kichik ekranlar uchun yozasiz, so'ng kattaroq ekranlar mavjud bo'lganda ular uchun uslublar qo'shasiz degani. Bu tavsiya etilgan yondashuv, chunki telefonlar eng cheklangan qurilma — ularni birinchi loyihalash joylashuvingizni sodda saqlaydi, katta ekranga kengaytirish esa ish stoli joylashuvini telefonga siqishtirishdan osonroq.

Amalda, standart CSS ingiz mobil versiya bo'ladi va siz kengroq ekranlar uchun sozlamalar qo'shasiz.

Media query lar

Media query faqat shart to'g'ri bo'lganda CSS qo'llaydi — ko'pincha minimal ekran kengligi. Turli o'lchamlar uchun turli qoidalar qilishingiz shu tarzda bo'ladi.

/* Base (mobile): stacked in a single column */
.layout {
  display: flex;
  flex-direction: column;
}
 
/* On screens 600px and wider: switch to a row */
@media (min-width: 600px) {
  .layout {
    flex-direction: row;
  }
}

Joylashuv o'zgaradigan kenglik (bu yerda 600px) breakpoint deb ataladi. min-width dan foydalanish narsalarni mobile-first saqlaydi: mobil qoida standart, media query esa uning ustiga ish stoli xatti-harakatini qo'shadi.

Nisbiy birliklar

Nisbiy birliklar abadiy qat'iy bo'lish o'rniga o'z konteksti bilan moslashadi, bu joylashuvlarga moslashishga yordam beradi:

% (foiz) — ota elementga nisbatan o'lchanadi. width: 50% — bu otaning kengligining yarmi, u qanaqa bo'lib chiqishidan qat'i nazar.
rem — ildiz shrift o'lchamiga nisbatan (odatda 16px). Shunday qilib 1rem — 16px, 1.5rem — 24px. Shrift o'lchamlari va oraliqlar uchun ajoyib, chunki foydalanuvchi asosiy shriftini o'zgartirsa hamma narsa birga masshtablanadi, bu esa accessibility uchun yaxshiroq.

Kengliklar va matn uchun qat'iy px o'rniga bularni afzal ko'ring, shunda dizayningiz turli ekranlarda nafas olishi mumkin.

.container {
  width: 90%;        /* fills most of the screen, whatever its size */
  max-width: 60rem;  /* but never gets too wide to read comfortably */
  font-size: 1rem;
}

Suhbat maslahatlari

Har doim viewport meta tegini eslatib o'ting — bu responsive sahifaga birinchi kerak bo'ladigan narsa.
Mobile-first ni tushuntiring: kichik ekranlar uchun asosiy uslublar, so'ng kattaroqlari uchun yaxshilash uchun min-width media query lar.
Nega % va rem kabi nisbiy birliklar moslashuvchan, accessible joylashuvlar uchun qat'iy piksellardan afzalligini biling.

viewport meta teg

Ushbu bir qator HTML <head> ingizga kiradi va juda muhim. Usiz telefonlar keng ish stoli kabi ko'rinib, sahifangizni sig'dirish uchun kichraytiradi va hamma narsani kichik qiladi.

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

U brauzerga aytadi: "qurilmaning haqiqiy kengligidan foydalan va uzoqlashtirma." Har doim uni kiriting. Responsive CSS usiz deyarli ishlamaydi.

Mobile-first fikrlash

Amalda, standart CSS ingiz mobil versiya bo'ladi va siz kengroq ekranlar uchun sozlamalar qo'shasiz.

Media query lar

Media query faqat shart to'g'ri bo'lganda CSS qo'llaydi — ko'pincha minimal ekran kengligi. Turli o'lchamlar uchun turli qoidalar qilishingiz shu tarzda bo'ladi.

/* Base (mobile): stacked in a single column */
.layout {
  display: flex;
  flex-direction: column;
}
 
/* On screens 600px and wider: switch to a row */
@media (min-width: 600px) {
  .layout {
    flex-direction: row;
  }
}

Nisbiy birliklar

Nisbiy birliklar abadiy qat'iy bo'lish o'rniga o'z konteksti bilan moslashadi, bu joylashuvlarga moslashishga yordam beradi:

% (foiz) — ota elementga nisbatan o'lchanadi. width: 50% — bu otaning kengligining yarmi, u qanaqa bo'lib chiqishidan qat'i nazar.

rem — ildiz shrift o'lchamiga nisbatan (odatda 16px). Shunday qilib 1rem — 16px, 1.5rem — 24px. Shrift o'lchamlari va oraliqlar uchun ajoyib, chunki foydalanuvchi asosiy shriftini o'zgartirsa hamma narsa birga masshtablanadi, bu esa accessibility uchun yaxshiroq.

Kengliklar va matn uchun qat'iy px o'rniga bularni afzal ko'ring, shunda dizayningiz turli ekranlarda nafas olishi mumkin.

.container {
  width: 90%;        /* fills most of the screen, whatever its size */
  max-width: 60rem;  /* but never gets too wide to read comfortably */
  font-size: 1rem;
}

Suhbat maslahatlari

Har doim viewport meta tegini eslatib o'ting — bu responsive sahifaga birinchi kerak bo'ladigan narsa.

Mobile-first ni tushuntiring: kichik ekranlar uchun asosiy uslublar, so'ng kattaroqlari uchun yaxshilash uchun min-width media query lar.

Nega % va rem kabi nisbiy birliklar moslashuvchan, accessible joylashuvlar uchun qat'iy piksellardan afzalligini biling.

Responsive asoslari