Cuantos cortes media-query para Responsive

image
El numero de cortes en Responsive Web Design determina el numero de visualizaciones diferentes que tenemos de una web.

¿Cuantos cortes necesitamos?

El numero de cortes que hay que realizar depende normalmente del diseño de la web, si la web tiene muchos elementos sobretodo a nivel de columnas necesitaremos más cortes, en caso contrario si la web es 100% width con una sola columna necesitaremos menos.

Hay un poco la leyenda de que si tienes una web fluida 100% no hace falta hacer cortes, falso, para que me entendáis por ejemplo si tenemos una imagen que tiene un texto incluida en la imagen, mostrarla en un tamaño de 600px nos permite leer perfectamente el mensaje, en cambio si se adapta al tamaño del dispositivo y lo miramos en un móvil a un tamaño de 340px el mensaje es ilegible, por lo que se debería realizar un corte para mostrar ese mensaje de otra forma que sea legible (sea poniéndola como texto fuera de la imagen o hacer la imagen a 340px con el texto más grande dentro de la imagen).

Otra leyenda o mejor dicho mal uso de los cortes es para modificar el tamaño del texto dependiendo del tamaño del dispositivo. En responsive los tamaños de textos no se deben especificar en ‘px’ sino en ‘em’ o ‘rem’.

Las media-querys normalmente se usan para mostrar unos estilos dependiendo de un ancho de un dispositivo pero no olvidar que tienen muchas otras propiedades, modo impresión, tipo de dispositivo, navegador, user-agent, etc…

Os detallo un listado base de media-querys para ancho de dispositivo y orientación:

* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}


/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}


/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}


/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}


/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}


/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}


/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}


/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Anuncios

, ,

  1. #1 por victobit el 18/07/2014 - 07:32

    Un compañero me ha pasado un link muy interesante para saber las medidas para cada dispositivo para poder hacer el corte adecuado.

    http://screensiz.es/phone

    Gracias Albert.

  1. Saber tamaños dispositivos mobiles para Responsive | Victobit's Blog
  2. Saber tamaños dispositivos móviles para Responsive | Victobit's Blog

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: