Bu breakpoint-ləri konfiqurasiya etmək və tətbiq etmək üçün CSS-də nə göstərilməlidir?

@media media sorğusu istifadə olunur. İçində, cihazın xüsusiyyətlərinə və ya baxış sahəsinə əsaslanan şərtlər müəyyən edilir.

Əsas parametrlər:

• width / height: Baxış sahəsinin eni / hündürlüyü.
• min-width / min-height: Minimal eni / hündürlüyü.
• max-width / max-height: Maksimal eni / hündürlüyü.
• orientation: Cihazın istiqaməti (portrait və ya landscape).

İstifadə nümunəsi, kəsik nöqtələrini tənzimləmək üçün:

/* 768px-dən kiçik ekranlar üçün əsas stil */
body {
  font-size: 16px;
}

/* 768px-dən 991px-ə qədər ekranlar üçün kəsik nöqtəsi */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* 992px və yuxarı ekranlar üçün kəsik nöqtəsi */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Yaygın istifadə olunan strategiyalar:

1. Mobile First: Əvvəlcə ən kiçik ekranlar üçün stilər təyin edilir, sonra min-width ilə daha geniş ekranlar üçün media sorğuları əlavə olunur.
2. Desktop First: Əvvəlcə böyük ekranlar üçün stilər təyin edilir, sonra max-width ilə daha kiçik ekranlar üçün media sorğuları əlavə olunur.

Seçim layihə və üstünlüklərə bağlıdır.

Standart kəsik nöqtəsi dəyərləri (təxminən, çərçivə və ya razılaşmaya əsaslanır):

Cihaz	Genişlik aralığı	Media sorğusu (Mobile First)	Media sorğusu (Desktop First)
Kiçik telefonlar	< 576px	Mövcud deyil (əsas stil)	@media (max-width: 575.98px)
Telefonlar	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Planşetlər	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Noutbuklar	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Kompüterlər	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Böyük kompüterlər	>= 1400px	@media (min-width: 1400px)	Mövcud deyil (əsas stil)

Əsasən, məzmun və dizayna əsaslanaraq kəsik nöqtələrini seçmək vacibdir, yalnız cihaz standartlarına görə deyil. Onlar dizayn 'qırılmağa' başladığı yerdə aktiv olmalıdır.