Ushbu breakpointslarni sozlash va qo'llash uchun CSSda nima ko'rsatilishi kerak?

Media so'rovi @media ishlatiladi. Uning ichida qurilma yoki ko'rish maydonining xususiyatlariga asoslangan shartlar belgilangan.

Asosiy parametrlar:

• width / height: Ko'rish maydonining kengligi / balandligi.
• min-width / min-height: Minimal kenglik / balandlik.
• max-width / max-height: Maksimal kenglik / balandlik.
• orientation: Qurilmaning orientatsiyasi (portrait yoki landscape).

Misol uchun, kesma nuqtalarini sozlash uchun:

/* 768px dan kichik ekranlar uchun asosiy uslublar */
body {
  font-size: 16px;
}

/* 768px dan 991px gacha bo'lgan ekranlar uchun kesma nuqtasi */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* 992px va undan yuqori ekranlar uchun kesma nuqtasi */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Keng tarqalgan strategiyalar:

1. Mobile First: Eng kichik ekranlar uchun uslublar avval belgilangan, keyin min-width bilan kengroq ekranlar uchun qo'shimcha shartlar qo'yiladi.
2. Desktop First: Katta ekranlar uchun uslublar avval belgilangan, keyin max-width bilan kichikroq ekranlar uchun shartlar qo'yiladi.

Tanlov loyiha va shaxsiy afzalliklarga bog'liq.

Standart kesma nuqtalari (taxminan, framework yoki kelishuvga qarab):

Qurilma	Kenglik diapazoni	Media so'rovi (Mobile First)	Media so'rovi (Desktop First)
Kichkina telefonlar	< 576px	Yo'q (asosiy uslublar)	@media (max-width: 575.98px)
Telefonlar	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Planshetlar	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Noutbuklar	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Kompyuterlar	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Katta kompyuterlar	>= 1400px	@media (min-width: 1400px)	Yo'q (asosiy uslublar)

Ushbu nuqtalarni tanlashda mazmun va dizaynga asoslanish muhim, faqat qurilma standartlariga emas. Ular dizayn 'buzilishni' boshlagan joyda ishlashlari kerak.