Los diseños flexibles

07 Jun Los diseños flexibles

El diseño web sensible se divide en tres componentes principales, incluyendo diseños flexibles, preguntas de los medios, y los medios de comunicación flexibles. La primera parte, los diseños flexibles, es la práctica de la construcción de la disposición de una página web con una rejilla flexible, capaz de cambiar el tamaño de forma dinámica a cualquier anchura. Las redes flexibles se construyen utilizando unidades de longitud relativas, más comúnmente en porcentajes o en unidades. Estas longitudes relativas se utilizan entonces para declarar valores de propiedad de la red comunes, tales como ancho, margen, o relleno.

Ventana gráfica relativa de las longitudes

El CSS 3 introduce algunas nuevas unidades de longitudes relativas específicamente relacionadas con el tamaño de la ventana del navegador o dispositivo. Estas nuevas unidades incluyen vw, Vh, Vmin y Vmax. El apoyo general a estas nuevas unidades no es muy grande, pero está creciendo.

• vw : ancho de las ventanas gráficas
• vh :altura de las ventanas gráficas
• Vmin : mínimo de altura y la anchura de la ventana gráfica
• Vmax : máximo de altura y la anchura de la ventana gráfica

Los diseños flexibles no abogan por el uso de unidades de medidas fijas, tales como píxeles o pulgadas. La razón de ser, la altura y el ancho de la ventana gráfica, cambia continuamente de un dispositivo a otro. Los diseños de páginas web deberán adaptarse a este cambio ya que los valores fijos tienen demasiadas restricciones. Afortunadamente, hay una fórmula fácil para ayudar a identificar las proporciones de un diseño flexible, utilizando los valores relativos.

La fórmula se basa en tomar la anchura de un elemento y dividiéndolo por la anchura de que es elemento padre. El resultado es la anchura relativa del elemento de destino.

½ /  context target = resultado

Rejillas flexibles

Vamos a ver cómo funciona esta fórmula dentro de un diseño de dos columnas. A continuación, tenemos una división de los elementos padres con la clase de contenedor tanto de la sección y elementos. El objetivo es que tiene la sección de la izquierda y el lado de la derecha, con márgenes iguales entre los dos. Normalmente, el margen de beneficio y estilos para este diseño se parece un poco a lo siguiente.

HTML

CSS

Cuadrícula fija de demostración

Utilizando la fórmula de cuadrícula flexible, se puede tomar todas las unidades fijas de longitud y convertirlos en unidades relativas. En este ejemplo, vamos a utilizar porcentajes, pero en unidades se trabajaría igual de bien. Aviso, independientemente en que el tamaño de la matriz del contenedor se convierte, la sección, márgenes y anchos se van a escalar proporcionalmente.

Demostración de cuadrícula flexible

Tomando el concepto de diseño flexible y fórmula, al volver a aplicar a todas las partes de una rejilla, se creará una página web completamente dinámicas, con la ampliación a cada tamaño de ventana gráfica. Para un mayor control dentro de un diseño flexible, se puede aprovechar también las min-width, max-width, min-altura, y max-heightpropiedades. .

El enfoque solo de diseño flexible no es suficiente. A veces, la anchura de una ventana del navegador puede ser tan pequeña que incluso escalar la disposición proporcionalmente, creará columnas que son demasiado pequeñas para mostrar efectivamente el contenido. En concreto, cuando el diseño se hace demasiado pequeño o demasiado grande, el texto puede resultar ilegible y el diseño puede comenzar a romperse. En este caso, las consultas de medios se pueden utilizar para ayudar a construir una mejor experiencia.