Блоки дар тарҳрезии ҷавобгӯ чӣ гунаанд?

Нуқтаи қатъ (breakpoint) дар тарҳи ҷавобгӯӣ арзиши ҳадди аққори паҳноии экран мебошад, ки ба он расида ё аз он гузаред, стилҳои CSS-и унсурҳои саҳифа тағир меёбанд.

Мақсади асосии нуқтаҳои қатъ:

• Таъмини намоиши оптималии мундариҷа: Дар андозаҳои гуногуни экран, блокҳо метавонанд андозаҳо, ҷойгиршавӣ ва марзҳои гуногун дошта бошанд.
• Пинҳон/намоиши унсурҳо: Масалан, дар дастгоҳҳои мобилӣ, панели ҷонибро пинҳон кардан мумкин аст, ва дар компютерҳои мизи корӣ нишон додан.
• Тавзеҳ додани ҳарфҳо ва тасвирҳо: Барои беҳтар хонданавӣ ва иҷроиш.

Нуқтаҳои қатъ бо ёрии media queries дар CSS муайян карда мешаванд:

/* Стилҳои асосӣ (барои дастгоҳҳои мобилӣ аввал) */
body {
  font-size: 16px;
}

/* Стилҳо барои экранҳои аз 768px ва бештар */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Намоиши панели ҷониб */
  }
}

/* Стилҳо барои экранҳои аз 1200px ва бештар */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Нуқтаҳои қатъӣ, ки одатан истифода мешаванд, асосан ба андозаи стандартии дастгоҳҳо асос ёфтаанд, аммо метавонанд мувофиқи тарҳи махсус танзим карда шаванд. Мисолҳои нуқтаҳои қатъӣ:

Андозаи экран	Истифодаи оддӣ
То 576px	Бисёр хурд (масалан, телефонҳои кӯҳна дар режим портрет)
576px - 768px	Кӯчак (телефонҳо дар режим манзил, планшетҳои хурд)
768px - 992px	Миёна (планшетҳо дар режим портрет, ноутбукҳо)
992px - 1200px	Бузург (ноутбукҳо, компютерҳои мизи корӣ)
Аз 1200px боло	Бисёр бузург (монитори калон)

Муҳим аст, ки тарҳрезӣ бо усули "mobile-first" анҷом дода шавад, аз нуқтаҳои қатъии хурд оғоз карда, барои экранҳои калонтар услубҳоро илова кунед, ки ин осон кардани навиштани дубора ё иваз кардани услубҳоро таъмин мекунад.