Барои танзим ва татбиқ кардани ин нуқтаҳои қатъӣ дар 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)	Бос (негізгі стильдер)

Маңыздысы — брейкпоинттерді контент пен макетке қарай таңдау, құрылғылардың стандарттарына емес. Олар макет «бұзылу» бастайтын жерлерде қолданылуы керек.