¿Cómo puedo ocultar o mostrar elementos específicos en CSS según el tamaño de la pantalla?

Para ocultar o mostrar elementos específicos en CSS según el tamaño de la pantalla, la técnica fundamental y más utilizada es la combinación de media queries con la propiedad display.

La idea es definir cómo se muestra un elemento por defecto y luego, dentro de una media query que se activa a cierto tamaño de pantalla (o «breakpoint»), cambiar esa propiedad display para ocultarlo o mostrarlo.

• Para ocultar un elemento completamente (de forma que no ocupe espacio en el layout), se usa display: none;.
• Para mostrar un elemento que estaba oculto, se le asigna un valor de display apropiado para su tipo y cómo debe interactuar con el layout, como display: block;, display: inline;, display: inline-block;, display: flex;, display: grid;, etc.

Ejemplo 1: Ocultar un elemento en pantallas pequeñas (enfoque «Desktop First» para este elemento)

Supongamos que tienes un elemento que es visible en pantallas grandes pero quieres ocultarlo en móviles (por ejemplo, una barra lateral compleja).

/* Estilos por defecto (para pantallas grandes) */
.sidebar-compleja {
  display: block; /* O flex, grid, etc., según su diseño */
  width: 250px;
  background-color: lightgray;
}

/* Cuando la pantalla tenga 767px de ancho o menos (móviles) */
@media (max-width: 767.98px) {
  .sidebar-compleja {
    display: none; /* Ocultamos la barra lateral */
  }
}Lenguaje del código: PHP (php)

Ejemplo 2: Mostrar un elemento solo en pantallas pequeñas (enfoque «Mobile First» para este elemento)

Imagina un botón de «menú hamburguesa» que solo debe ser visible en móviles.

/* Estilos por defecto (para móviles) */
.boton-menu-movil {
  display: inline-block; /* O block, etc. */
  padding: 10px;
  background-color: navy;
  color: white;
}

/* Cuando la pantalla tenga 768px de ancho o más (tabletas/escritorio) */
@media (min-width: 768px) {
  .boton-menu-movil {
    display: none; /* Ocultamos el botón de menú hamburguesa */
  }
}Lenguaje del código: PHP (php)

Alternativas menos comunes para este propósito:

• visibility: hidden; / visibility: visible;: Oculta el elemento, pero sigue ocupando su espacio en el layout, lo cual no siempre es deseado para adaptar la estructura.
• opacity: 0; / opacity: 1;: Hace el elemento transparente, pero sigue ocupando espacio y puede ser interactivo (a menos que se use pointer-events: none;).

Para la mayoría de los casos de ocultar/mostrar elementos con el fin de adaptar la estructura del layout, la combinación de media queries con display: none; (y el valor de display apropiado para mostrarlo) es la solución más robusta y recomendada.