Pregunta sobre diseño web de fluido [cerrado

Question

Hay 2 formas en que podemos implementar un diseño de fluido (uno que se ajustaría al tamaño de la pantalla en el que se ve);

Enfoque 1: Podemos usar el tamaño del navegador disponible (o el ancho/altura de la vista) y, en consecuencia, definir nuestro CSS ... Esto es equivalente a usar, por ejemplo, un CSS @Media Max-Width: 320px en este enfoque, incluso un navegador de escritorio que se exprime a un tamaño muy pequeño mostraría el mismo diseño que en un dispositivo móvil

Enfoque 2: Diseñamos nuestro CSS en función del dispositivo en el que se ve (escritorio/móvil/tableta). Esto es equivalente a usar, por ejemplo, un CSS @Media Min-Device-Width: 768px

Entonces, si ve, hay una diferencia en cómo estamos identificando qué CSS aplicar en función de "ancho" o "ancho del dispositivo"

Mi pregunta no es sobre consultas de los medios y cómo aplicarlas en absoluto.

Mi pregunta es ¿cuál de los 2 enfoques de diseño debería ser el preferido, cualquier pros/contras para cualquiera de ellos? ¿Deberíamos diseñar un dispositivo o debemos diseñar para el área de navegador disponible?