jesus.perezpaz.es

Saas @mixin para cambiar medidas para un diseño responsivo

En mi último proyecto necesitaba cambiar las medidas de ciertos elementos a el 60% de su tamaño original para adaptarlos a los navegadores móviles.

Lo primero que intenté fue utilizar las unidades ‘rem’ de CSS pero no me funcionaban bien en el navegador de Android :S (si que funcionaban por el contrario en ios6, firefox mobile, y las versiones de escritorio de firefox y chrome. Dejé de hacer tests cuando falló en android pero imagino que no habrá problemas en Safari y en IE… pues no se 😛 )

La alternativa era hacerlo con ‘píxeles’, pero no era muy conveniente. Tenía que calcular “a mano” todas las medidas y declarar de nuevo los elementos en las ‘media queries’. La peor parte es que si quiero cambiar el porcentaje de las medidas para móvil ya que tendría que re-calcular todo, haciendo imposible (bueno, no imposible, pero si muy largo) hacer test de prueba / error.

Entonces decidí pasarme a sass y crear un ‘mixin’ para generar las ‘media queries’ automáticamente, basándose en el tamaño de cada elemento:

Para usarlo en mis elementos:

Fíjate que he puesto la medida que quiero darle al elemento entre los paréntesis y las propiedades, seguidas de la variable $px, dentro de las llaves.

El resultado cuando compilas el fichero scss en css es el siguiente:

El problema viene cuando usas más de una vez este ‘mixin’ en el mismo elemento, ya uqe cada vez que lo usas crea un nuevo ‘media query’ en tu css:

.myclass {
  @include res(400px) { width: $px; }
  @include res(200px) { height: $px; }
}

No he encontrado una manera de resolver esto. Funcionar funciona bien en todos los navegadores (No he apreciado problemas graves de ‘performance’ pero seguro que bueno no es. Además siempre es preferible un código más limpio y hay que tener en cuenta que si lo usas mucho también v aa crecer el peso de tu archivo css. Por supuesto, si encuentras una forma de solucionar esto dímelo 🙂 )

Ahora puedo cambiar la medida de todos mis elementos para los terminales móviles al mismo tiempo, simplemente cambiando la variable $responsive_resize

Ir a la portada → ← Volver artás

Comentarios

0 comentarios

Aún no hay comentatios. ¿Por qué no añades uno?

Dejar un comentario

Tu dirección de email no será publicada