/* 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 */ }
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.
No hay comentarios
Publicar un comentario
Desea contactar con nosotros, deje un comentario y pronto le daremos respuesta.