Бул бреекпоинттерди конфигурациялоо жана колдонуу үчүн CSSте эмне көрсөтүлүшү керек?

Медиа суроолор @media колдонулат. Анын ичинде стильдерди колдонуу шарттары түзмөктүн мүнөздөмөлөрүнө же көрүү аймагынын өзгөчөлүктөрүнө негизделген.

Негизги параметрлер:

• width / height: Көрүү аймагынын кеңдиги/бийиктиги.
• min-width / min-height: Эң кичүү кеңдик/бийиктик.
• max-width / max-height: Эң жогорку кеңдик/бийиктик.
• orientation: Түзмөктүн багыты (portrait же landscape).

Колдонуу мисалы — брейкпоинттерди орнотуу:

/* 768pxге чейин кичинекей экрандар үчүн негизги стильдер */
body {
  font-size: 16px;
}

/* 768pxден 991pxге чейин экрандар үчүн */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* 992px жана андан жогору экрандар үчүн */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Көп колдонулган стратегиялар:

1. Mobile First: Эң кичүү экрандар үчүн стильдер алдын ала белгиленет, андан кийин кеңейүүчү экрандар үчүн min-width медиасуроолору кошулат.
2. Desktop First: Үлкен экрандар үчүн стильдер алдын ала белгиленет, андан кийин тар экрандар үчүн max-width медиасуроолору кошулат.

Стратегияны тандоо долбоордун талаптарына жана артыкчылыктарына жараша болот.

Стандарттык брейкпоинттердин маанилери (жакынча, фреймворк же макулдашууга жараша):

Жараян	Диапазон ширээк	Медиасуроо (Mobile First)	Медиасуроо (Desktop First)
Кичинекей телефондар	< 576px	Жок (негизги стильдер)	@media (max-width: 575.98px)
Телефондар	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Планшеттер	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Ноутбуктар	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Десктоптор	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Ирикен чоң десктоптор	>= 1400px	@media (min-width: 1400px)	Жок (негизги стильдер)

Маанилүү — брейкпоинттерди контент жана макетке ылайык тандоо, түзмөктөрдүн стандарттарына эмес. Алар макеттин «бүлүнүү» башталуучу жерлеринде колдонулушу керек.