Media Queries CSS para adaptar tu sitio web a dispositivos móviles (smartphones)

Si estás creando un sitio web con WordPress, WooCommerce o cualquier otro CMS, es fundamental que se vea bien en dispositivos móviles, ya que la mayoría del tráfico proviene de teléfonos inteligentes.

En este artículo aprenderás cómo usar correctamente media queries en CSS para adaptar tu diseño web a diferentes tamaños de pantalla y orientaciones (vertical y horizontal).

¿Qué son las Media Queries?
Las media queries son una característica de CSS3 que permiten aplicar estilos condicionales según las características del dispositivo: como el ancho de pantalla, la resolución, o la orientación.
Gracias a ellas puedes lograr un diseño responsive (adaptable), lo cual es clave para una buena experiencia de usuario y también para el posicionamiento SEO.

Ejemplo práctico: CSS para smartphones
A continuación, te comparto un ejemplo funcional y actualizado para apuntar específicamente a teléfonos móviles con anchos entre 320px y 736px (rango típico de smartphones).
Copia este código en tu archivo style.css (o en el personalizador de WordPress si no usas un tema hijo):

/* ——— Estilos CSS para smartphones ——— */

/* Modo vertical y horizontal (todos los móviles) */
@media only screen and (min-width: 320px) and (max-width: 736px) {
    /* Inserta aquí tu CSS general para móviles */
}

/* Solo modo vertical (portrait) */
@media only screen and (min-width: 320px) and (max-width: 736px) and (orientation: portrait) {
    /* Inserta aquí tu CSS exclusivo para vertical */
}

/* Solo modo horizontal (landscape) */
@media only screen and (min-width: 320px) and (max-width: 736px) and (orientation: landscape) {
    /* Inserta aquí tu CSS exclusivo para horizontal */
}

Media Queries CSS para iPhones

/* iPhone SE (1ra/2da/3ra Gen) — 320x568 */
@media only screen and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
  /* iPhone SE - Vertical */
}
@media only screen and (device-width: 568px) and (device-height: 320px) and (orientation: landscape) {
  /* iPhone SE - Horizontal */
}

/* iPhone 6, 7, 8 — 375x667 */
@media only screen and (device-width: 375px) and (device-height: 667px) and (orientation: portrait) {
  /* iPhone 6/7/8 - Vertical */
}
@media only screen and (device-width: 667px) and (device-height: 375px) and (orientation: landscape) {
  /* iPhone 6/7/8 - Horizontal */
}

/* iPhone 6/7/8 Plus — 414x736 */
@media only screen and (device-width: 414px) and (device-height: 736px) and (orientation: portrait) {
  /* iPhone Plus - Vertical */
}
@media only screen and (device-width: 736px) and (device-height: 414px) and (orientation: landscape) {
  /* iPhone Plus - Horizontal */
}

/* iPhone X, XS, 11 Pro — 375x812 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (orientation: portrait) {
  /* iPhone X/XS/11 Pro - Vertical */
}
@media only screen and (device-width: 812px) and (device-height: 375px) and (orientation: landscape) {
  /* iPhone X/XS/11 Pro - Horizontal */
}

/* iPhone XR, XS Max, 11 — 414x896 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (orientation: portrait) {
  /* iPhone XR/XS Max/11 - Vertical */
}
@media only screen and (device-width: 896px) and (device-height: 414px) and (orientation: landscape) {
  /* iPhone XR/XS Max/11 - Horizontal */
}

/* iPhone 12, 12 Pro, 13, 14 — 390x844 */
@media only screen and (device-width: 390px) and (device-height: 844px) and (orientation: portrait) {
  /* iPhone 12/13/14 - Vertical */
}
@media only screen and (device-width: 844px) and (device-height: 390px) and (orientation: landscape) {
  /* iPhone 12/13/14 - Horizontal */
}

/* iPhone 12/13/14 Pro Max — 428x926 */
@media only screen and (device-width: 428px) and (device-height: 926px) and (orientation: portrait) {
  /* iPhone Pro Max - Vertical */
}
@media only screen and (device-width: 926px) and (device-height: 428px) and (orientation: landscape) {
  /* iPhone Pro Max - Horizontal */
}

/* iPhone 15 Pro Max — 430x932 */
@media only screen and (device-width: 430px) and (device-height: 932px) and (orientation: portrait) {
  /* iPhone 15 Pro Max - Vertical */
}
@media only screen and (device-width: 932px) and (device-height: 430px) and (orientation: landscape) {
  /* iPhone 15 Pro Max - Horizontal */
}