Media Queries CSS para Tablets: adapta tu diseño a iPads y otros dispositivos

Adaptar tu sitio web a todos los tamaños de pantalla es esencial para ofrecer una buena experiencia de usuario. Con media queries en CSS, puedes personalizar el diseño y comportamiento de tu web según las características del dispositivo, como la resolución de pantalla o la orientación.

En este artículo te comparto el código base para adaptar tu diseño a tablets, incluyendo dispositivos populares como el iPad en modo vertical y horizontal.

Puedes copiar y pegar este código directamente en tu hoja de estilos (style.css o similar).

/* ———– Tablets ———– */

/* Estilos generales para tablets (modo vertical y horizontal) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Inserta aquí tus estilos personalizados */
}

/* Estilos solo para tablets en modo vertical */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Inserta aquí tus estilos para orientación vertical */
}

/* Estilos solo para tablets en modo horizontal */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Inserta aquí tus estilos para orientación horizontal */
}

Media Queries CSS para iPads más populares

/* iPad Mini (5ª y 6ª generación) — 768x1024 */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  /* iPad Mini - Vertical */
}
@media only screen and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
  /* iPad Mini - Horizontal */
}

/* iPad (9ª y 10ª generación) — 810x1080 */
@media only screen and (device-width: 810px) and (device-height: 1080px) and (orientation: portrait) {
  /* iPad 9/10 Gen - Vertical */
}
@media only screen and (device-width: 1080px) and (device-height: 810px) and (orientation: landscape) {
  /* iPad 9/10 Gen - Horizontal */
}

/* iPad Air (4ª y 5ª generación) — 820x1180 */
@media only screen and (device-width: 820px) and (device-height: 1180px) and (orientation: portrait) {
  /* iPad Air 4/5 Gen - Vertical */
}
@media only screen and (device-width: 1180px) and (device-height: 820px) and (orientation: landscape) {
  /* iPad Air 4/5 Gen - Horizontal */
}

/* iPad Pro 11" (1ª a 4ª generación) — 834x1194 */
@media only screen and (device-width: 834px) and (device-height: 1194px) and (orientation: portrait) {
  /* iPad Pro 11" - Vertical */
}
@media only screen and (device-width: 1194px) and (device-height: 834px) and (orientation: landscape) {
  /* iPad Pro 11" - Horizontal */
}

/* iPad Pro 12.9" (3ª a 6ª generación) — 1024x1366 */
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) {
  /* iPad Pro 12.9" - Vertical */
}
@media only screen and (device-width: 1366px) and (device-height: 1024px) and (orientation: landscape) {
  /* iPad Pro 12.9" - Horizontal */
}