Ocultar DIV o capa con CSS dependiendo de la resolución

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.

9 respuestas a «Ocultar div o elemento con CSS dependiendo de la resolución»

  1. Avatar de Meraldi Yañez
    Meraldi Yañez

    como puedo ocultar una clase con espacio por ejemplo la clase: «NO APLICA»

    1. Avatar de Jesús Tovar

      Hola Meraldi,

      en CSS las clases con espacio no existen. El espacio se considera un divisor cuando estamos aplicando clases a un elemento de HTML, ya que un mismo elemento puede tener varias a la vez. En tu ejemplo «no aplica», se interpretaría como dos clases separadas: «no» y «aplica». Habitualmente suelen utilizarse guiones si queremos hacer las veces de espacios para mejorar la legibilidad (no-aplica) o simplemente omitir el hueco (noaplica).

      Ahora bien, suponiendo que no tienes ningún control sobre los nombres de las clases en HTML (por el motivo que sea), podrías usar las pseudoclases de CSS. Con el selector :has() se pueden aplicar estilos si un elemento contiene las clases «no» y «aplica» a la vez. Por ejemplo si hablamos de un div, podrías hacer algo como lo siguiente:

      div:has(no):has(aplica) {
        display:none;
      }

      Ten en cuenta que la pseudoclase :has() es ahora mismo experimental, por lo que en versiones antiguas de los navegadores puede que no funcione.

  2. Avatar de Sofia Varela
    Sofia Varela

    Muchas gracias Jesús! Funcionó perfecto

  3. Avatar de Marcos
    Marcos

    Super util hmno

    1. Avatar de Jesús Tovar

      Gracias Marcos, un saludo.

  4. Avatar de Juan Perdomo
    Juan Perdomo

    NO ANDAAA PORQUE, LO PROBE Y NO ANDA

    1. Avatar de Jesús Tovar

      Hola Juan,

      este método se encuentra bien verificado y forma parte de las técnicas actuales en el desarrollo web responsive. Si no te funciona puede deberse bien a que tu versión contiene un error o a que hay una regla CSS que lo está sobrescribiendo.

      Si me das más detalles puedo tratar de ayudarte.

      Un saludo.

  5. Avatar de Galileo Erazo
    Galileo Erazo

    Muchas gracias, hice mi primer header responsive con esta guía. De nuevo, muchas gracias querido admin de la página :)))))))

    1. Avatar de Jesús Tovar

      ¡Enhorabuena Galileo!, me alegra que te haya servido. Gracias a ti por comentar 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *