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

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

14 de septiembre 2015

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 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 o simplemente cambiar sus características. En estos casos podemos valernos de las reglas de medios en CSS.

Las reglas de medios de CSS permiten definir para qué dispositivo se utilizará una determinada propiedad 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 este caso lo que estamos buscando es que a partir de una determinada resolución, se oculte un DIV o cualquier otra capa o elemento.

Suponiendo que la capa en cuestión queramos que 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 a 600px por ejemplo, se aplicarán las propiedades que hay dentro. Sería 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 lo tienes claro, consulta cuál es la diferencia entre display y visibility. Comentar que del mismo modo que podemos ocultar un DIV a partir de una resolución de pantalla, también lo podríamos mostrar usando min-width, lo que nos permitirá activar el estilo en cuestión desde esa resolución para arriba.

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.

Publicado por Jesús Tovar

Categorías: CSS, Diseño

Etiquetas: , ,

Deja un comentario

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

Este sitio web utiliza cookies, si continúas navegando estás dando tu consentimiento. Consulta nuestra política de cookies y de privacidad.

ACEPTAR
Aviso de cookies