Vi que puedes cambiar estilos con la regla CSS @media, y también puedes agregar window.addEventListener('resize', handleResize); en su javascript para cambiar su documento dependiendo de su tamaño.
¿Hay alguna diferencia y deberías usar uno sobre el otro? O son intercambiables?
Si puede hacer algo en CSS puro, evite usar JavaScript.
Pensé que esto siempre era cierto, pero sorprendentemente por lo que leí, no siempre es cierto, especialmente cuando hablamos de animaciones:
En la mayoría de los casos, el rendimiento de las animaciones basadas en CSS es casi el mismo que el de las animaciones con JavaScript, al menos en Firefox. Algunas bibliotecas de animación basadas en JavaScript, como GSAP y Velocity.JS, incluso afirman que pueden lograr un mejor rendimiento que las transiciones/animaciones CSS nativas.
-- MDN
Otro enlace interesante sobre CSS vs JS: SO: ¿Debería evitar JS cuando sea posible y usar CSS en su lugar?
Para usos clásicos (cambiar la vista de dispositivos móviles, tabletas y computadoras de escritorio), CSS puro es más eficiente con media queries .
Espero nuevas respuestas y obtener más información sobre cuándo priorizar JS que CSS.