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

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>