Ce este un punct de întrerupere în designul adaptiv?

Punctul de întrerupere (breakpoint) în designul adaptiv reprezintă valoarea prag a lățimii ecranului dispozitivului, la atingerea sau depășirea căreia se schimbă stilurile CSS ale elementelor paginii.

Scopul principal al punctelor de întrerupere:

• Asigurarea unei afișări optime a conținutului: Pe diferite dimensiuni de ecran, blocurile pot avea dimensiuni, poziții și margini diferite.
• Ascunderea/afișarea elementelor: De exemplu, pe dispozitive mobile, se poate ascunde bara laterală, iar pe desktop-uri, se poate afișa.
• Modificarea fonturilor și imaginilor: Pentru o mai bună lizibilitate și performanță.

Punctele de întrerupere sunt definite cu ajutorul media queries în CSS:

/* Stiluri implicite (pentru dispozitive mobile în primul rând) */
body {
  font-size: 16px;
}

/* Stiluri pentru ecrane cu lățimea de la 768px în sus */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Afișează bara laterală */
  }
}

/* Stiluri pentru ecrane cu lățimea de la 1200px în sus */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Punctele de întrerupere tipice se bazează pe dimensiunile standard ale dispozitivelor, dar pot fi personalizate în funcție de designul specific. Exemple de puncte de întrerupere standard:

Dimensiunea ecranului	Utilizare tipică
Până la 576px	Foarte mici (de exemplu, telefoane vechi în modul portret)
576px - 768px	Mici (telefoane în modul peisaj, tablete mici)
768px - 992px	Medii (tablete în modul portret, laptopuri)
992px - 1200px	Mari (laptopuri, desktop-uri)
Peste 1200px - 1400px+	Foarte mari (monitoare mari)

Este important să proiectați cu abordarea "mobile-first", începând cu cele mai mici puncte de întrerupere și adăugând stiluri pentru ecrane mai mari, ceea ce facilitează suprascrierea stilurilor.