Las media queries no han muerto, pero su uso correcto ha cambiado. En el enfoque moderno, no se definen breakpoints genéricos por dispositivo. Se definen breakpoints específicos para cada componente que se está construyendo.
En vez de pensar “esto cambia a 768 píxeles”, piensas “esta tarjeta necesita reorganizarse cuando tenga menos de 400 píxeles disponibles”. Los breakpoints son consecuencia de lo que estás construyendo, no una rejilla arbitraria impuesta desde fuera. Eso garantiza que cada elemento funcione bien en su propio rango de posibilidades, no solo en los dispositivos que alguien eligió para testear hace años.
¿Mobile first o desktop first?
La respuesta honesta es: depende del componente. No hay una regla universal. Hay patrones donde empezar desde el móvil es más eficiente y hay patrones donde tiene más sentido partir del escritorio. Lo que no tiene sentido es elegir uno y aplicarlo ciegamente a todo.
Lo importante es entender por qué estás tomando cada decisión, no seguir una convención porque alguien dijo que era la correcta.
Por qué la mayoría de webs siguen haciéndolo mal
La mayor parte de los constructores de páginas web más utilizados —incluidos algunos de los más populares del mercado— siguen usando el modelo de breakpoints fijos. No es culpa de quienes los usan: es la forma en que estas herramientas están diseñadas. Pero eso no significa que sea el enfoque correcto.
El resultado es miles de webs que se ven bien en cuatro tamaños y están rotas en el resto. En un mundo con más de 2.200 combinaciones posibles de dispositivos, eso ya no es aceptable.
El diseño responsive moderno no consiste en elegir mejor los breakpoints. Consiste en construir de una forma que los haga innecesarios en la mayor parte de los casos, y cuando sí hacen falta, usarlos de forma precisa y con criterio.