Estoy tratando de hacer que mi pie de página responda cuando cambia el tamaño de la pantalla. Javascript funciona, pero solo cuando se ha cargado la página. No sé si hay forma de que pueda usar html y css solamente...
var reswidth = window.screen.width; var mql = window.matchMedia("screen and (max-width: 765px)"); if(reswidth < 756){ console.log(document.getElementById('logon-footer').children[0].setAttribute('style','position: static')); } else if(mql.matches){ alert("Window is 800px or wider"); } ``puede hacerlo usando La regla @media se usa en consultas de medios para aplicar diferentes estilos para diferentes tipos/dispositivos de medios.
Las consultas de medios se pueden usar para verificar muchas cosas, como:
ancho y alto de la ventana de visualización ancho y alto de la orientación del dispositivo (¿la tableta/teléfono está en modo horizontal o vertical?) resolución El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada (diseño web receptivo) a computadoras de escritorio, portátiles, tabletas y teléfonos móviles.
También puede usar consultas de medios para especificar que ciertos estilos son solo para documentos impresos o para lectores de pantalla (tipo de medio: impreso, pantalla o voz).
Además de los tipos de medios, también hay funciones de medios. Las funciones de medios brindan detalles más específicos para las consultas de medios, al permitir probar una función específica del agente de usuario o dispositivo de visualización. Por ejemplo, puede aplicar estilos solo a aquellas pantallas que son más grandes o más pequeñas que un cierto ancho.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: yellow; } @media only screen and (max-width: 600px) { body { background-color: lightblue; } } </style> </head> <body> <h1>The @media Rule</h1> <p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "light blue", otherwise it is "yellow".</p> </body> </html>