Mostrar un div en rango específico de resoluciones

  • Autor Autor raulsuances
  • Fecha de inicio Fecha de inicio
R

raulsuances

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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
 
Última edición:
Hola,

Puedes usando esta variable screen.width y screen.height

PHP: 
if(screen.width>770){
 //muestro el div 
}else
{ //no muestro el div
 }
 
[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
 }
Hacer clic para expandir...

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🙂
 
Última edición:

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.
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro