¿Qué se debe especificar en CSS para configurar y…

Se utiliza la consulta de medios @media. Dentro de ella se establecen condiciones para aplicar estilos, basadas en las características del dispositivo o del área de visualización.

Parámetros principales de las consultas de medios:

width / height: Ancho / altura del área de visualización.
min-width / min-height: Ancho / altura mínimos del área de visualización.
max-width / max-height: Ancho / altura máximos del área de visualización.
orientation: Orientación del dispositivo (portrait o landscape).

Ejemplo de uso para configurar puntos de quiebre:

/* Estilos predeterminados para pantallas menores de 768px */
body {
  font-size: 16px;
}

/* Punto de quiebre para pantallas de 768px a 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Punto de quiebre para pantallas de 992px en adelante */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Estrategias comúnmente usadas para definir puntos de quiebre:

Mobile First: Primero se definen estilos para las pantallas más pequeñas, luego se añaden consultas de medios con min-width para pantallas más anchas.
Desktop First: Primero se definen estilos para pantallas grandes, luego se añaden consultas de medios con max-width para pantallas más estrechas.

La elección de la estrategia depende del proyecto y las preferencias.

Valores estándar aproximados para puntos de quiebre (depende del framework o acuerdo):

Dispositivo	Rango de ancho	Consulta de medios (Mobile First)	Consulta de medios (Desktop First)
Teléfonos pequeños	< 576px	No aplica (estilos base)	`@media (max-width: 575.98px)`
Teléfonos	>= 576px	`@media (min-width: 576px)`	`@media (max-width: 767.98px)`
Tabletas	>= 768px	`@media (min-width: 768px)`	`@media (max-width: 991.98px)`
Portátiles	>= 992px	`@media (min-width: 992px)`	`@media (max-width: 1199.98px)`
Escritorios	>= 1200px	`@media (min-width: 1200px)`	`@media (max-width: 1399.98px)`
Escritorios grandes	>= 1400px	`@media (min-width: 1400px)`	No aplica (estilos base)

Es importante elegir los puntos de quiebre en función del contenido y el diseño, no solo de los estándares de dispositivos. Deben activarse donde el diseño empieza a 'romperse'.

¿Qué se debe especificar en CSS para configurar y aplicar estos puntos de interrupción?