Estilos CSS básicos para diseño responsive

Tras repasar Viewport y Picture en los últimos días, seguimos profundizando en los principales recursos para diseño responsive. Y no podemos olvidarnos de las Media Queries, tal vez las herramientas más representativas cuando pensamos en CSS para 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 porque es un tema que da para mucho.

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 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 lo que 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 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.

1 comentario
  1. Juan | iconos Dice:

    ¿Qué es el diseño web responsivo? Es un enfoque de diseño y codificación de un sitio web de tal forma que el sitio web ofrece una óptima experiencia de visualización – facilidad de lectura y navegación con un mínimo de cambio de tamaño, panoramización y desplazamiento – a través de una amplia gama de dispositivos Desde monitores de computadoras de escritorio hasta teléfonos móviles.

    El diseño responsive hoy es una necesidad.

    Responder

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *