escalar un diseño web con la ventana gráfica

Question

Conozco las unidades CSS 3 vw, vh y vm, que parecen ser útiles para crear elementos que tengan tamaños de cuadros y tamaños de texto relativos al tamaño de la ventana del navegador. Sin embargo, lamentablemente, estos no son bien compatibles con los principales navegadores actuales; solo Internet Explorer 9+ lo hace.

¿Qué otros métodos puedo usar para hacer cosas como las propiedades de CSS font-size que se escalan con la ventana gráfica? Me gustaría evitar las soluciones de JavaScript y/o jQuery si es posible.

Answer 1

Hacer un sitio web 100% escalable es posible. Como dijo Rev, puedes hacer esto usando valores porcentuales, pero es complicado.

La mejor opción es utilizar @media queries. Estos le permiten aplicar reglas CSS a una página solo bajo ciertas condiciones. Al usar consultas de medios para detectar el ancho del dispositivo y/o el ancho de la página, puede aplicar un control preciso sobre cómo se ve su sitio en diferentes tamaños de ventanas. Por ejemplo:

@media screen and (max-device-width: 960px) { 
    font-size:14px; 
} 
@media screen and (max-device-width: 480px) { 
    font-size:13px; 
} 

Ahora, el ejemplo anterior es bastante trivial y artificioso. Para una comprensión más profunda de lo que puede lograr con las consultas de medios, le recomiendo que vea el W3C spec page. Algunas de las más potentes son las consultas width, min-device-width, max-device-width, portrait|landscape y print.

Como nota al margen, asegúrese de incluir estos estilos en la parte inferior de su CSS, para que no se sobrescriban por los estilos predeterminados.