Veteasabertu

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

14 de septiembre 2015
Ocultar DIV o capa 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 que permiten adaptar nuestra plantilla para que reaccione de manera diferente dependiendo de la resolución de pantalla.

Sin embargo no es obligatorio utilizar JavaScript para hacer una web responsive, podemos valernos simplemente de CSS para lograr nuestros objetivos. El grado de complejidad de la plantilla será el 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 prescindir de 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í:

Pero al igual que hemos especificado que esta regla se aplicará a pantallas, se puede especificar también otro tipo, como impresoras. 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

Etiquetas:

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies