Ce trebuie specificat în CSS pentru configurarea și aplicarea acestor puncte de întrerupere?

Se utilizează interogarea media @media. În interiorul acesteia se stabilesc condiții pentru aplicarea stilurilor, bazate pe caracteristicile dispozitivului sau ale zonei de vizualizare.

Parametrii principali ai interogărilor media:

• width / height: Lățimea / înălțimea zonei de vizualizare.
• min-width / min-height: Lățimea / înălțimea minimă a zonei de vizualizare.
• max-width / max-height: Lățimea / înălțimea maximă a zonei de vizualizare.
• orientation: Orientarea dispozitivului (portrait sau landscape).

Exemplu de utilizare pentru configurarea punctelor de întrerupere:

/* Stiluri implicite pentru ecranele mai mici de 768px */
body {
  font-size: 16px;
}

/* Punct de întrerupere pentru ecranele de la 768px până la 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Punct de întrerupere pentru ecranele de la 992px în sus */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Strategii frecvent utilizate pentru stabilirea punctelor de întrerupere:

1. Mobile First: Se definesc mai întâi stilurile pentru cele mai mici ecrane, apoi se adaugă interogări media cu min-width pentru ecranele mai largi.
2. Desktop First: Se definesc mai întâi stilurile pentru ecranele mari, apoi se adaugă interogări media cu max-width pentru ecranele mai înguste.

Alegerea strategiei depinde de proiect și preferințe.

Valori standard aproximative pentru punctele de întrerupere (depind de framework sau acord):

Dispozitiv	Interval de lățime	Interogare media (Mobile First)	Interogare media (Desktop First)
Telefoane mici	< 576px	Nu există (stiluri de bază)	@media (max-width: 575.98px)
Telefoane	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tablete	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Laptop-uri	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Desktop-uri	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Desktop-uri mari	>= 1400px	@media (min-width: 1400px)	Nu există (stiluri de bază)

Este important să alegeți punctele de întrerupere în funcție de conținut și de layout, nu doar de standardele dispozitivelor. Acestea trebuie să se activeze acolo unde layout-ul începe să 'se rupă'.