Gracias por la rápida contestación.
Mmmh.... aunque la alternativa en CSS3 parece realmente fácil, según tengo entendido CSS3 aún no está adoptado por la mayoría de los navegadores, por lo que el tema de compatibilidad me preocupa.
Creo que me quedaré con javascript. De todas formas, no me termina de funcionar. Algo andaré haciendo mal.
Entre las etiquetas
head, coloco este código:
Código:
<script type="text/javascript">
var link = document.createElement('link');
if(screen.width<=750) {
link.setAttribute('href', 'r750.css');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
var head = document.getElementsByTagName('head').item(0);
head.appendChild(link);
}
else if(screen.width<=1180) {
link.setAttribute('href', 'r1180.css');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
var head = document.getElementsByTagName('head').item(0);
head.appendChild(link);
}
else {
link.setAttribute('href', 'r1440.css');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
var head = document.getElementsByTagName('head').item(0);
head.appendChild(link);
}
</script>
Yo creo que mi error a lo mejor está en que tengo los archivos CSS en una carpeta con el mismo nombre:
...css/r1440.css
El caso es que he probado también a poner:
link.setAttribute('href', 'css/r1440.css');
pero tampoco va ¿alguna idea?