如何根据不同的分辨率调用不同的 CSS ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.Style800
{
  font-size: 20pt;
  color: #0000ff;
}
.Style1024
{
  font-size: 10pt;
  color: #ff0000;
}
</style>
<script>
function appCSS()
{
var width=screen.width;
if(width==800){
document.all.test.className="Style800"
}
else{
document.all.test.className="Style1024"
}
}
</script>
</HEAD><BODY onload="appCSS()">
<span id=test>This is my TEXT</span>
</BODY>
</HTML>