checke skærmopløsning og vælge style

Hej allesammen.

Jeg har forsøgt at lave forskellig farve og skriftsstørrelse alt efter hvor stor skærmen er. Jeg har forsøgt mig med dette:

<html>
<head>
<script type="text/javascript">
var width = screen.width;
if (width == 800) {
document.write("<style type="text/css"><!--.style1 {color: #0033FF;    font-size: 24px;}--></style>>");
}
else if (width == 1024) {
document.write("<style type="text/css"><!--.style1 {color: #ffffFF;    font-size: 12px;}--></style>>");
}
</script>

<style type="text/css">
<!--
.style2 {color: #0033FF}
-->
</style>
</head>
<body>
<p class="style1">HER KOMMER SKRIFTEN OG SKIFTER FARVE OG STØRRELSE (800:<span class="style2">DENNEFARVE</span> 1024: SORT) </p>
</body>
</html>

---

Men ak, det virker ikke. Er det en lille ting at rette, eller kan det slet ikke lade sig gøre på den måde?