Cargar CSS a través de la resolución de pantalla

[newraist]

Hace un par de días pregunté por como saber la resolución de pantalla, pero el codigo que he encontrado en las faqs de esta misma sección me solucionaron mi problema, por qué realmente lo que necesitaría es poder cargar diferentes hojas de estilo dependiendo de la resolución del usuario, ya que estoy realizando la página completamente en XHTML y no me gustaría tener que poner una página principal donde detectara la resolución y lanzara otra página dependiendo de la resolución. Es por eso que me gustaría saber si existe la posibilidad que en lugar de lanzar una página determinada una vez detectada la resolución, se puede cargar una determinada hoja de estilos que configure la página correctamente.

[tunait]

Prueba a ponerle un id al tag que vincula tu hoja de estilos

<link id="hojaEstilos" href="estilospordefecto.css" rel="stylesheet" type="text/css" />

y debajo le poner un js que cambie al vuelo el href

<script type="text/javascript">
document.getElementById('hojaEstilos').href='hojae stilos' + screen.width + '.css'
</script>

eso en el caso de que hayas creado una hoja para todas las resoluciones posibles. Si sólo tienes dos, entonces habrías de poner algo tipo....


var Estilos ="estilospordefecto.css"
if(screen.width <= 800){
Estilos = "estilos800.css"
}
else{Estilos = "estilos1024.css"}
document.getElementById('hojaEstilos').href=Estilo s