A continuación un listado de las @media queries más comunes de CSS3 para hacer responsive web desing: adaptar vuestras páginas web a los diferentes dispositivos móviles (Smartphones, iPads, iPhones) en sus diferentes posiciones portrait (vertical) and landscape (horizontal):
/* Smartphones (portrait & landscape) */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } /* Smartphones (landscape) */ @media only screen and (min-width : 321px) { } /* Smartphones (portrait) */ @media only screen and (max-width : 320px) { } /* iPads (portrait & landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } /* iPads (landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { } /* iPads (portrait) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { } /* Ordenadores de sobremesa y portátiles */ @media only screen and (min-width : 1224px) { } /* Pantallas grandes */ @media only screen and (min-width : 1824px) { } /* iPhone 4 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
Agradezco tu comentario 🤘