Ocultar div o elemento con CSS dependiendo de la resolución

Optimizar una web para dispositivos móviles ya no es nada nuevo, en los últimos años los diseños adaptables o responsive han ido ganando cada vez más terreno. Habitualmente se usan frameworks como Bootstrap que permiten maquetar una página web para que reaccione de manera diferente dependiendo de la resolución de pantalla. Éstos suelen combinar CSS con JavaScript o bien utilizar algún lenguaje como Sass o Less.

Sin embargo no es obligatorio utilizar un framework o JavaScript para hacer una web responsive, podemos valernos simplemente de CSS para lograr nuestros objetivos. El grado de complejidad de la plantilla a realizar y nuestros conocimientos sobre maquetación web será lo que nos haga decantarnos por una opción un otra.

Diseñar utilizando porcentajes para que nuestro diseño se ajuste a diferentes resoluciones es tan válido como cualquier otro sistema, pero a veces para algunas cosas es posible que necesitemos directamente ocultar ciertos elementos como un div o simplemente cambiar sus características. En estos casos podemos valernos de las reglas de medios en CSS.

Ocultar div o elemento

Las reglas de medios de CSS permiten definir para qué dispositivo y resoluciones se utilizará una determinada clase o id cuando definamos los estilos de una página. Así por ejemplo podemos tener una hoja de estilos para pantallas de ordenadores y otra para dispositivos móviles. En el caso que vamos a ver, lo que estamos buscando es que a partir de una determinada resolución, se oculte un div o cualquier otra capa o elemento. Para eso lo primero que tenemos que tener claro es qué propiedad vamos a usar, así que crearé una clase a la que en un alarde de originalidad llamaré «ocultar-div» a la que añadiremos la propiedad display:none.

.ocultar-div{
    display:none;
}

Suponiendo que queramos que el div en cuestión se oculte en dispositivos móviles, usaremos el medio screen a través de la regla @media, donde especificaremos que si la web se muestra desde un terminal con una resolución inferior o igual a 600px, por ejemplo, se aplicará la clase con las respectivas propiedades que tenga dentro. La propiedad max-width será la que nos permita hacer esto. La sintaxis completa que debemos usar será algo así:

@media screen and (max-width: 600px) {
    .ocultar-div{
        display:none;
    }
}

Usamos la propiedad display:none para que las capas adyacentes se comporten como si ésta no existiera, pero podríamos usar visibility:hidden también. Si no tienes claro en qué casos podrías usar una propiedad u otra, consulta en este artículo cuál es la diferencia entre display y visibility.

Mostrar div o elemento

Comentar que del mismo modo que podemos ocultar un div a partir de una resolución de pantalla hacia abajo, también lo podríamos mostrar a partir de una resolución hacia arriba usando min-width. De este modo si la pantalla es igual o superior al ancho que especifiquemos se activará la clase y mostrará un elemento que estuviera previamente oculto con display:none.

@media screen and (min-width: 600px) {
    .mostrar-div{
        display:block;
    }
}

See the Pen Ocultar o mostrar elemento con CSS dependiendo de la resolución by Jesús Tovar (@jesustovar) on CodePen.

Si bien hemos especificado que esta regla se aplicará a resoluciones de pantallas con independencia del dispositivo, se puede especificar también otros tipos de medios, como podrían ser impresoras para ser muy específicos. Aquí tenéis una tabla muy completa de medios CSS, donde figuran además las características que se pueden aplicar a los tipos de medios.