Estoy en medio de completar una prueba de codificación. Quiero cambiar todos mis tamaños de div según el tamaño de la pantalla. Esto se debe a que mi prueba no se ve igual en mi computadora portátil que en el monitor de una computadora mac. En mi pequeña computadora portátil, todos los divs se ven grandes, sin embargo, en un monitor de computadora Mac, parece decente.
Usa vh.
Consulte la tipografía del tamaño de la ventana gráfica
Use 100vh y 100vw si desea ancho y alto completos. De lo contrario, cambie en consecuencia.
div { height: 100vh; width:100vh }Use consultas de medios o establezca ancho/alto en % o vw/vh en lugar de px
Espero que eso sea lo que está buscando... O tal vez use un marco como bootstrap o base
¡Debe usar Chrome Developer Tools para verificar a qué resolución desea cambiar el tamaño de su div!
Si tienes un div:
#bluebox { width: 50px; height: 50px; background-color: blue; } <div id="bluebox"> </div>Pero, cuando el tamaño de la pantalla es de 480 px de ancho, solo desea que el div sea de 25 px X 25 px, haría lo siguiente:
#bluebox { width: 50px; height: 50px; background-color: blue; } @media (max-width: 480px) { #bluebox { width: 25px; height: 25px; } } <div id="bluebox"> </div>Esto se hace con consultas de medios, que es muy simple y estándar. ¡Espero que haya ayudado!