Aplique una hoja de estilo CSS diferente según el tamaño de la ventana del navegador: no puedo encontrar nada definitivo

ayúdame por favor si fueras tan amable ...

Tengo algunas dificultades para determinar cuál es la mejor manera de hacerlo, ya que el nuevo algoritmo de Google no es muy útil con mis términos de búsqueda (puntuales).

Mi sitio es 100% ancho de fluido y necesito cambiar las hojas de estilo para los usuarios en 1152/1024 y menos. Comencé con la siguiente pieza de jscript para detectar la resolución y aplicar estas nuevas hojas de estilo, pero no funciona en IE, simplemente genial.

Entiendo que una hoja de estilo basada en la ventana real del navegador es la mejor, pero el contenido tiene un ancho máximo de 1280px, por lo que espero que no se vean afectadas resoluciones enormes con ventanas minimizadas, y dudo que los usuarios se molesten en minimizar sus ventanas si están en resoluciones en 1024 y menos.

Aquí está mi código actual colocado en la cabeza:

<script type="text/JavaScript">
var screenwidth = screen.width;
if (screen.width < 1280){
document.write('<link rel="stylesheet" href="/Assets/Templates/Common/Public/1024res.css" type="text/css" media="screen" />');
}
</script>

Entonces, mis preguntas son: 1) ¿Por qué esto no funciona en IE? Y 2) ¿Es esta la mejor ruta, especialmente considerando que jscript puede estar deshabilitado? ¿Alguien sabe cuál es la mejor manera de lograr esto?

Cualquier ayuda - muy apreciada!

Respuestas a la pregunta(1)

Su respuesta a la pregunta