Mostrar un div en rango específico de resoluciones

raulsuances · 27 May 2016

Se puede hacer que un elemento, un div por ejemplo, solo aparezca en determinadas resoluciones?
por ejemplo, que solo aparezca en las resoluciones que sean mayores a 770 x 1000.
Y en las otras o bien le dejo invisible con visibility: hidden, o bien borro el nodo mediante javascript (esto se hacerlo), pero no se si es posible programarlo, por ejemplo:

PHP:

if($resolucionAncho>770){
//muestro el div
}else{
//no muestro el div
}

Creo que lo que necesito saber es una función que saque la resolución de pantalla que tengo en cada momento.
Espero haberme explicado bien.
Un saludo

SnakeNet · 27 May 2016

Hola,

Puedes usando esta variable screen.width y screen.height

PHP:

if(screen.width>770){
 //muestro el div 
}else
{ //no muestro el div
 }

elii01 · 27 May 2016

[MENTION=163333]raulsuances[/MENTION] Hola. Lo que quieres lo puedes hacer así:

HTML:

.div{display:none;}
  [MENTION=16931]medi[/MENTION]a(min-width:770px){
.div{display:block;}

Así el div solo te aparecerá en resoluciones mayores a 770px. Recuerda sustituir .div por el class de tu div.

raulsuances · 27 May 2016

elii01 dijo:
[MENTION=163333]raulsuances[/MENTION] Hola. Lo que quieres lo puedes hacer así:

HTML:

.div{display:none;} [MENTION=16931]medi[/MENTION]a(min-width:770px){ .div{display:block;}

Así el div solo te aparecerá en resoluciones mayores a 770px. Recuerda sustituir .div por el class de tu div.

No consigo hacerlo como me dices,
Te dejo el código a ver si ves lo que estoy haciendo mal, que esto es nuevo para mi.
He cambiado el ejemplo, en este simplemente tengo un div con 100 de ancho y 100 de alto de color dorado, y lo que quiero es que cuando baje de 770px la resolucion del navegador cambie de color a rojo.

Insertar CODE, HTML o PHP:

<html>
	<head>
		<style>
		    [MENTION=16931]medi[/MENTION]a (min-width: 770px) {
			.prueba {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="prueba" style="width:100px;height:100px; background-color:gold">
	</div>
	</body>
</html>

ACTUALIZO
Acabo de ver el fallo, lo dejo corregido por aqui

HTML:

<html>
	<head>
		<style>
			.prueba{
				background-color:gold
			}
		  [MENTION=16931]medi[/MENTION]a (max-width: 770px) {
			.prueba {
				 background-color: red;
				
			}
		</style>
	</head>
	<body>
		<div class="prueba" style="width:100px;height:100px;">
		
		</div>
	</body>
</html>

El fallo yo creo que estaba en que al darle el background-color en linea, me cogía ese color todo el rato y no cambiaba.
GRACIAS POR AYUDARME [MENTION=130977]elii01[/MENTION] 🙂
Un saludo
- - - Actualizado - - -

SnakeNet dijo:
Hola,

Puedes usando esta variable screen.width y screen.height

PHP:

if(screen.width>770){ //muestro el div }else { //no muestro el div }

Gracias por tu respuesta,
creo que lo voy a hacer con css como me dice [MENTION=130977]elii01[/MENTION] que tiene pinta de ser mas sencillo
Un saludo🙂

SnakeNet · 27 May 2016

raulsuances dijo:
No consigo hacerlo como me dices,
Te dejo el código a ver si ves lo que estoy haciendo mal, que esto es nuevo para mi.
He cambiado el ejemplo, en este simplemente tengo un div con 100 de ancho y 100 de alto de color dorado, y lo que quiero es que cuando baje de 770px la resolucion del navegador cambie de color a rojo.

Insertar CODE, HTML o PHP:

<html> <head> <style> [U][B]Enlace eliminado[/B][/U]a (min-width: 770px) { .prueba { background-color: red; } </style> </head> <body> <div class="prueba" style="width:100px;height:100px; background-color:gold"> </div> </body> </html>

ACTUALIZO
Acabo de ver el fallo, lo dejo corregido por aqui

HTML:

<html> <head> <style> .prueba{ background-color:gold } [MENTION=16931]medi[/MENTION]a (max-width: 770px) { .prueba { background-color: red; } </style> </head> <body> <div class="prueba" style="width:100px;height:100px;"> </div> </body> </html>

El fallo yo creo que estaba en que al darle el background-color en linea, me cogía ese color todo el rato y no cambiaba.
GRACIAS POR AYUDARME elii01 🙂
Un saludo
- - - Actualizado - - -

Gracias por tu respuesta,
creo que lo voy a hacer con css como me dice elii01 que tiene pinta de ser mas sencillo
Un saludo🙂

Básicamente et facilite lo que solicitastes el directamente lo mete en css que si es mayor cambie de valor el otro es que directamente no lo cargue.

Saludos.