viernes, 3 de mayo de 2013

Tamaños para Media Queries en diferentes dispositivos

A continuación presento algunas medidas estándar para los más comunes dispositivos a los que nos podemos enfrentar a la hora de diseñar sitios web adaptables.

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

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

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

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

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

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

/* PC de escritorio  y portatiles  ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Grandes pantallas ----------- */
@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 */
}

No hay comentarios:

Publicar un comentario

Desea contactar con nosotros, deje un comentario y pronto le daremos respuesta.

Plantillas para WP Store Locator

He instalado el plugin WP Store Locator pero su plantilla original no se ve muy bien.  lo mejor es crear nuestras propias plantillas para es...