CSS Responsive: estilos básicos para tu diseño
Tras repasar Viewport y Picture en estos artículos, seguimos profundizando en los principales recursos para diseño responsive a la hora de crear una página web. En esa línea, no podemos olvidarnos de las Media Queries, tal vez las herramientas más representativas cuando pensamos en CSS para el ya proclamado responsive design, ya que permiten realizar la mayor parte del efecto de adaptación a todo tipo de pantallas. De ellas, hablaremos más adelante, pero en nuestro artículo de hoy, queremos centrar nuestra atención en las propiedades de estilo CSS.
Como adelantábamos, de momento, nos centraremos en una lista de propiedades de estilo CSS para conocer algunas técnicas útiles que conviene tener en cuenta en la maquetación web, especialmente si estamos trabajando en sitios adaptables.
Variaciones entre los navegadores del modelo de caja
Antes que nada, debemos ser conscientes de la diferencias entre los navegadores, principalmente haciendo alusión a las versiones antiguas de Internet Explorer.
Para evitar que cada navegador interprete un modelo de caja diferente, deberemos indicar con el atributo box-sizing cómo debe de comportarse. Por esta razón, si no lo definimos en todo el sitio, las páginas podrían verse de forma diferente en cada uno de los navegadores.
Nuestra recomendación de box-sizing en todos los elementos de la página, sería esta:
box-sizing: border-box
Distintas posibilidades en la maquetación web
Con tablas, pero «sin tablas»
display:table nos permite mostrar información tabulada sin usar las tan recurridas tablas de HTML. Esta forma de maquetación web sirve para posicionar elementos dentro del diseño con las posibilidades que te ofrecen las tablas, pero sin trabajar directamente con ellas.
Flexbox
Flexbox es una de las técnicas que nos trae como novedad CSS y que sirve para maquetar de manera mucho más versátil y rápida. Navegadores antiguos como Internet Explorer 9 e inferiores no disponen de Flexbox y debemos recurrir como mínimo a la versión 10 para tener un soporte parcial y obligándonos a trabajar con prefijos propietarios ms-. Es a partir de la versión 11 de Internet Explorer y de manera completa en el resto de los navegadores, la que nos ofrece el 100 % del aprovechamiento de Flexbox.
Atributos min-width y max-width / min-height y max-height
Son útiles para los diseños responsive porque los contenedores se estiran y se encogen para adaptarse a las dimensiones de las ventanas o pantallas.
.dimensiones-maximas{
max-width: 1700px;
}
Tal vez deseas que una columna no sobrepase unas dimensiones de anchura, que al hacer grande la ventana se estire, pero que no llegue a un valor concreto. O una imagen que se adapta perfectamente al ancho, no llegue a estirarse tanto que exceda su resolución.
.img-banner-aside{
width: 100%;
max-width: 320px;
}
En el siguiente ejemplo, con las alturas sucede algo parecido, aunque en este caso no se hacen más grandes por los cambios en las dimensiones de la pantalla o ventana, sino por el contenido que tienen. Si tienes un listado de artículos, el navegador hará que las cajas donde estén colocados dispongan de la altura necesaria para mostrar la descripción del artículo, pero si unos tienen más texto que otros, puede suceder que las alturas queden descompensadas, aunque este problema lo podríamos solucionar con Flexbox o con display table.
.article-home{
background-color: #bc00;
min-height: 235px;
}
En los asuntos que hemos tratado, no está de más disponer de los atributos max-width y min-width, así como max-height y min-height.
De los muchos artículos que hemos publicado sobre diseño responsive, te puede resultar especialmente útil este: Unidades de medida para diseño responsive. ¿A qué esperas para convertir tu sitio web en uno responsive? Haz que la experiencia de los usuarios que te visitan sea única.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.