Pegar resolução, e fazer validação para css

[Gustavo Heitor Borges 0]

Bem galera, estou com um problema, montei este codigo, para pegar a resolução da tela, e caso for maior que 1280 dar um tanto de margin, e se for menor que 1280, dar outro tamanho de margin, mas o codigo não esta funcionando de jeito nenhum, ele ta dando somente o primeiro tamanho de margin, se eu altero a resolução ele não da o outro tamanho de margin.

 

Alguem pode me ajudar?

Obrigado!

<script type="text/javascript">

//pega a largura da resolução da tela
var width = screen.width;

//pega a altura da resolução da tela
var height = screen.height;

</script>

<?php
$width = "<script>document.write(width)</script>";

$height = "<script>document.write(height)</script>";

?>
<div style="background:#000; height:400px; height:400px;  margin-top: <?php 
									 if($width > 1280){ 
									   echo '50px;';} 
									 elseif($width < 1280){
									   echo '300px;'; 
								        }
								      ?>">
																												
</div>

[William Bruno 1501]

Hum.. que tal utilizar media queries ? apenas css puro.

E pq vc precisa disso da margem ?

[Gustavo Heitor Borges 0]

Por causa de um menu, que esta bugando somente na resolução 1280x768.

[William Bruno 1501]

Ok, utilize media queries então.

 

@media only screen and (max-width:1179px){
  #topo { margin-top: 300px; }
}
@media only screen and (min-width:1280px){
  #topo { margin-top: 50px; }
}

[Gustavo Heitor Borges 0]

 

cara muito Obrigado! resolveu o problema, não sabia que o css tinha esta propriedade.

Obrigado!