Porblemas con @media

[AngelKrak]

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:

<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:

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 {
  display: block;
}
 
#img2 {
  display: none;
}
 
@media all and (min-width:800px) {
  #img1 {
    display: none;
  }
  #img2 {
    display: block;
  }
}
 

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