1

contenido responsive con data-interchange de foundation

Para hacer contenido responsive design con foundation, vamos a utilizar data-interchange, con este atributo podemos indicarle que valores va a tomar, partiendo desde small, continuando con medium y finalizando con large. Debemos seguir el orden indicado anteriormente.

Este atributo data-interchange se lo ponemos a un div, o a una imagen, o a un elemento html distinto, y el contenido de este elemento ira cambiando según las medidas por donde es visualizado y según el contenido que le definamos como parámetros.

el data-interchange le vamos a pasar valores de la misma manera que un array, es decir, dentro de corchetes [] y separandolos por “,” coma , de la siguiente manera: data-interchange= “[valor,small],[valor,medium],[valor,large]”

En caso de se omita alguno de los tamaños, ejemplo medium o large, tomara como referencia el valor anterior.

ejemplo:
img data-interchange="[ruta.png,small], [ruta2.png,medium],[ruta3.png,large]"

En este ejemplo vamos a mostrar una imagen diferente para cada tamaño.

Escribe tu comentario
+ 2