Arquitecturas moviles :MediaQueries y Breakpoints

Cada día trabajamos mas con aplicaciones móviles y cada día necesitamos mas utilizar MediaQueries y Breakpoints . Ahora bien ¿Que es un BreakPoint a nivel de aplicaciones móviles?. Bueno no es muy dificil de entender normalmente cuando diseñamos aplicaciones moviles tenemos varios tamaños de pantalla con los cuales trabajar .

001

 

MediaQueries

Para que podamos diseñar aplicaciones web con distintos breakpoints deberemos apoyarnos en el concepto de MediaQueries de CSS3.  Una MediaQuery nos permite definir diferentes estilos para distintas resoluciones de pantalla .Vamos a verlo :

@media screen and (device-width: 768px) and (device-height: 1024px) {

background-color:blue;

}

De esta forma hemos definido unos estilos para el Ipad 1 y también para el propio Ipad mini que se encargará de cambiar el color de fondo por azul.

002

De igual forma que podemos asignar una MediaQuery para el Ipad podríamos hacer algo similar con un Iphone vamos a verlo:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)  {

background-color:green;
}

Ahora bien muchas veces nos olvidamos que los breakpoints no solo afectan al tamaño de pantalla sino que también afectan a la densidad de pixeles de la pantalla .Por ejemplo un Iphone 3 y un Iphone 4 tienen una pantalla de tamaño identico .Sin embargo necesitaremos diseñar dos breakpoints distintos uno para cada tipo de dispositivo que tenga en cuenta la resolución .

003

 

Vamos a ver el código para estos breakpoints :

Iphone

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1)   {

background-color:green;
}

Iphone 4

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2)   {

background-color:green;
}

Hemos tenido que usar una nueva propiedad de las mediaqueries , la propiedad de device-pixel-ratio que nos indica que esta query solo se ejecuta en el caso de estar en un dispositivo con resolución retina. Diseñemos siempre nuestras aplicaciones teniendo en cuenta los distintos breakpoints que vamos a abordar.

 

Post By Cecilio Álvarez Caules (32 Posts)

Oracle Certified Master, Java EE Enterprise Architect .Experto en la plataforma JEE y Trainer. Autor del libro Arquitectura Java Sólida Dueño del blog sobre JEE Arquitectura Java

Website: →

Connect

3 Responses to “Arquitecturas moviles :MediaQueries y Breakpoints”