CSS responsive sin usar media queries

 03·03·2017      Diseño y desarrollo   CSS   HTML 

CSS responsive sin usar media queries

En ocasiones es interesante aplicar cambios en elementos basados en las dimensiones de su contenedor, en lugar de las dimensiones de la ventana del navegador. Para abordar este problema ha nacido el concepto “element queries”  o “container queries” aunque todavía no es una realidad.

Aquí vamos a ver un ejemplo de cómo, a través de técnicas CSS, aplicar cambios a ciertos elementos en función de las dimensiones de su contenedor.

La técnica de los "cuatro magníficos"

Rémi Parmentier definió la técnica de los “cuatro magníficos” (The Fab Four technique) en su artículo The Fab Four technique to create Responsive Emails without Media Queries.

Esta consiste el el uso de las propiedades CSS width, min-width, max-width y calc para crear puntos de ruptura basados en el ancho. Esta técnica se puede aplicar fácilmente en cualquier página web. Por ejemplo:

{
  min-width: 50%;
  width: calc((25em - 100%) * 1000);
  max-width: 100%;
  /* Cambiar 25em por tu punto de ruptura. */
}

Esto funciona porque cuando width es un porcentaje, es un porcentaje del ancho del contenedor del elemento al que se aplica la regla. La función calc compara este valor con el punto de ruptura deseado y genera un numero positivo grande (si el ancho es menor que el punto de ruptura) o negativo (si el ancho es mayor que el punto de ruptura) o cero si coinciden. Un número positivo grande es limitado por la propiedad max-width y un número negativo grande o cero adoptan el valor de la propiedad min-width.

En el ejemplo anterior, marcamos un punto de ruptura de 25em. Esto se traduce en 400px para un tamaño de fuente de 16px. Si el contenedor tiene de ancho 400px o más (igual a o mayor que el punto de ruptura), el width se convierte en 0 o en un número negativo: (400 - 400 = 0) * 1000 = 0 ó (400 - 401 = -1) * 1000 = -1000

Con valores como estos, prevalece el valor de min-width, así que el ancho resultante sería 50%. Si el contenedor fuese de 399px o menor (menor que el punto de ruptura), el ancho resultaría en un número positivo: (400 - 399 = 1) * 1000 = 1000

En este caso prevalece el valor de max-width por lo tanto el 100%. El diagrama adjunto debería ayudar a entender el proceso.

Imagen flotada – Todo el ancho / Parte del ancho

En este ejemplo se usa la técnica de los “cuatro magníficos” junto a la propiedad float para cambiar una imagen en función de la anchura del contenedor. Permite a los elementos cambiar de una posición apilada ocupando el total del contenedor en anchos pequeños a una posición flotada (un elemento al lado del otro) cuando hay suficiente espacio.

El HTML:

<div class="thumbnail team" style="border:1px solid #ddd;">
  <div class="float-img"><img src="/public/files/hortensia-sm.jpg" /></div>
    <div class="caption">
      <h3><em>Hydrangea macrophylla</em></h3>
      <p>Llamada popularmente <strong>hortensia</strong>, es una especie del género Hydrangea originaria de Japón y ampliamente cultivada en Europa. Se trata de un arbusto caducifolio que suele crecer hasta una altura de entre 1 y 3 m. Las inflorescencias se agrupan en corimbos terminales, grandes cabezas globulares, de color blanco, azul, rojo o rosa.</p>
    </div>
  </div>
</div>

El CSS:

.team .float-img {
  min-width: 50%;
  width: calc((25em - 100%) * 1000);
  max-width: 100%;
  float: left;
  margin-right: 3rem;
  margin-bottom: 3rem;
}
.team .float-img img {
  /* Remove whitespace under images: */
  vertical-align: middle;
  width: 100%;
}

El resultado (cambia el ancho de la pantalla del navegador para ver el efecto):

 Aplicando la técnica de los "cuatro magníficos":

Hydrangea macrophylla

Llamada popularmente hortensia, es una especie del género Hydrangea originaria de Japón y ampliamente cultivada en Europa. Se trata de un arbusto caducifolio que suele crecer hasta una altura de entre 1 y 3 m. Las inflorescencias se agrupan en corimbos terminales, grandes cabezas globulares, de color blanco, azul, rojo o rosa.

 Sin aplicar la técnica:

Hydrangea macrophylla

Llamada popularmente hortensia, es una especie del género Hydrangea originaria de Japón y ampliamente cultivada en Europa. Se trata de un arbusto caducifolio que suele crecer hasta una altura de entre 1 y 3 m. Las inflorescencias se agrupan en corimbos terminales, grandes cabezas globulares, de color blanco, azul, rojo o rosa.


Si quieres ver más técnicas y ejemplos, acude al artículo original (en inglés): Responsive CSS Patterns without Media Queries.



Historias relacionadas

Mapas interactivos sin usar Google Maps

Mapas interactivos sin usar Google Maps

Leaflet es una librería JavasScript de código abierto para embeber mapas. Es una librería perfecta para sustituir a Google Maps en los sitios en que queremos incluir un mapa de situación de nuestro negocio o una serie de marcadores con direcciones de interés.

Recientemente, hemos utilizado esta librería en el proyecto Podorunners, en el que ...

Creando temas visuales para Wordpress con Timber y Twig

Creando temas visuales para Wordpress con Timber y Twig

Uno de los mayores problemas de los temas visuales de WordPress es la mezcla de código PHP y código HTML. Esto genera archivos difíciles de entender en muchas ocasiones y con potenciales problemas de seguridad en otras. La dificultad que supone manejar estos archivos a muchos diseñadores web, les lleva a usar plugins visuales para ...

División por sílabas en Scribus y Debian

División por sílabas en Scribus y Debian

En el diseño del libro Indumentaria de Segovia usamos Scribus que es nuestra aplicación de referencia para la maquetación de textos. Es una herramienta gratuita de software libre suficientemente madura para trabajos a nivel profesional, estando a la altura de Adobe InDesign, por ejemplo.

En maquetación de libros y otras publicaciones, una de las razones ...

Solicítanos información

 Tel: (+34) 983 070 900

    Envía un correo