[SOLUCIONADO] Porblemas con @media

marcgarcia51 · #1 (**permalink**) 08/09/2015, 06:21

Muy buenas, tengo 2 imágenes para mi header, una (la mas grande "img1") para vista en modo "screen"(pc) y otra (mas pequeña "img2") para la vista en smartphones ( aprox 800px).
En el head están la etiqueta <meta name="viewport" content="width=device-width"> y el css
Tengo las 2 imagenes colocadas en el header de mi html, y en el css le digo:
Cuando la vista sea "screen" el @media no lo va a leer, tiene que mostrar la imagen grande y la pequeña ocultarla; cuando sea "800px" va a leer lo que hay en @media, tiene que ocultar la imagen grande y mostrar la pequeña. Pero no funciona, cambie o no el tamaño de la ventana del navegador siempre muestra la grande. Tambien use "vista de diseño adaptable" en herramientas del navegador pero es lo mismo que redimensionar la ventana en si.

Código HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css"/>
    <meta name="viewport" content="width=800, initial-scale=1.0">
  </head>
  <body>
  		<header id="header-principal" >
				
		
		<a href="index.html" ><img id="img1" src="/images/logo.png" ></img> </a>
		<a href="index.html" ><img id="img2" src="/images/logo-mobile.png"></img> </a>

		
		   		
		</header>
  </body>
</html>

Código:

body{
margin:0px;
font-family:'Arial';
height:100%;
 }


#header-principal{
margin:auto;
width:100%;
height:100px;
max-height:120px;
background: green url('fondo.png') repeat;
position:static;
}


#img1{
visibility:visible;
 }

#img2{
visibility:hidden;
z-index:-1;
 }


@media (width:800px){

 #img1{
  visibility:hidden; 
  z-index:-1;}
  
  #img2{
  visibility:visible;
  z-index:1;
  margin-left:0px;
width: 100px;
  height:100px;
   }
}

AngelKrak · #2 (**permalink**) 08/09/2015, 06:43

amig@ para empezar todos tus Media Queries estaban mal(hasta donde yo se) y tambien el "Viewport" ;)

ahi te dejare el nuevo codigo que te hice que funciona en moviles y pc ;)

<meta name="viewport" content="width=device-width, user-scalable=no">

Código HTML:

Ver original<header id="header-principal" >
                
        
        <a href="index.html" ><img id="img1" src="http://lorempixel.com/200/100/" ></img> </a>
        <a href="index.html" ><img id="img2" src="http://lorempixel.com/200/100"></img> </a>
 
        
                
        </header>

Código CSS:

Ver originalbody {
  margin: 0px;
  font-family: 'Arial';
  height: 100%;
}
 
#header-principal {
  margin: auto;
  width: 100%;
  height: 100px;
  max-height: 120px;
  background: green url('fondo.png') repeat;
  position: static;
}
 
#img1 {
  display: block;
}
 
#img2 {
  display: none;
}
 
@media all and (min-width:800px) {
  #img1 {
    display: none;
  }
  #img2 {
    display: block;
  }
}

Demo:
http://codepen.io/AngelKrak/pen/MawrKZ

marcgarcia51 · #3 (**permalink**) 08/09/2015, 07:23

Muy bueno (funciona, pero mal), la etiqueta <meta > que puse no esta mal, vos solo le agregaste user-scalable="no" que hace que el usuario no pueda hacer zoom en la pagina. Las imagenes se ven al revés, la del movil se ve en modo "screen" y la modo screen se ve en movil. Porque pasa eso ?

AngelKrak · #4 (**permalink**) 08/09/2015, 11:52

no entiendo muy bien cual es el problema amigo, podrias mostrar una captura de tu error? y que es lo que quieres exactamente?

marcgarcia51 · #5 (**permalink**) 08/09/2015, 13:40

Nada, ya está resuelto. Pensé que habias puesto la @media query para moviles y el css normal para pc normales, pero me di cuenta de que escribiste:

Código:

@media all and (min-width:800px)

Traducido: "para todos los dispositivos y (AND) pantallas mayores a 800px"
Entonces supe que era al contrario.

AngelKrak · #6 (**permalink**) 08/09/2015, 17:18

haaaa jejeje, que bueno que lo solucionastes jejeje xD suerte (Y)