CSS según resolución

[vrael]

Pues eso, tengo tres plantillas CSS que quiero cargar según la resolución del usuario, pero no me funciona el código, a ver si podeis ayudarme:

Código:

<script type="text/javascript">
if(screen.width<=750) document.write('<link href="css/r750.css" rel="stylesheet" type="text/css" />');
	else if(screen.width<=1180) document.write('<link href="css/r1180.css" rel="stylesheet" type="text/css" />');
		else document.write('<link href="css/r1440.css" rel="stylesheet" type="text/css" />');
document.write('<link href="css/r1440.css" rel="stylesheet" type="text/css" />')
</script>

¿Alguna idea? Gracias

[codecweb98]

Una alternativa en CSS3 es utilizar expresiones de JavaScript dentro del mismo código CSS, por ejemplo:

Código CSS:

#pageWidth
    {
    width:expression((document.body.clientWidth < 980)? "750px" : "980px");
    }
 

Respecto a la opción que buscas, el código JavaScript para incrustar archivos CSS sería el siguiente:

Código Javascript:

var link = document.createElement('link');
link.setAttribute('href', 'r750.css');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
var head = document.getElementsByTagName('head').item(0);
head.appendChild(link);
 

[vrael]

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?

[vrael]

Es curioso, porque si pongo el código tal cual sin utilizar ninguna estructura if y poniéndole la ruta de la carpeta, sí que funciona.
Pero en cuanto lo meto en el if, ya no.

Y además estoy seguro de que se mete correctamente en el if

[vrael]

Ok, ya he visto el error. El código funciona perfectamente. Había sido un espacio en blanco en el nombre del archivo ¬.¬''

Gracias de nuevo. Chao!

[Adler]

Hola

Prueba a poner una id al tag que vincula tu hoja css, por ejemplo hojaStilos

Código Javascript:

var hCSS ="estilospordefecto.css";
if(screen.width <=750){
hCSS = "e750.css";
}
else if(screen.width<=1180) {
hCSS = "e1180.css";
}else{
hCSS = "e1440.css";
}
document.getElementById('hojaStilos').href = hCSS;
}
 

Parece más sencillo

Suerte

[vrael]

Mmmh... estoy probando esto, pero no consigo que funcione:

Código:

<script type="text/javascript">
var hCSS ="estilospordefecto.css";
if(screen.width <=750){
	hCSS = "css/r750.css";
	}
	else if(screen.width<=1180) {
		hCSS = "css/r1180.css";
		}
		else{
			hCSS = "css/r1400.css";
			}
document.getElementById('hojaStilos').href = hCSS;

</script>
<link href="" id="hojaStilos" rel="stylesheet" type="text/css" />

[Adler]

Hola

Al revés. Primero ha de existir

Código Javascript:

<link href="" id="hojaStilos" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var hCSS ="estilospordefecto.css";
if(screen.width <=750){
    hCSS = "css/r750.css";
    }
    else if(screen.width<=1180) {
        hCSS = "css/r1180.css";
        }
        else{
            hCSS = "css/r1400.css";
            }
document.getElementById('hojaStilos').href = hCSS;
 
</script>
 

Suerte

[vrael]

Gracias! Ahora si que funciona todo perfectamente.

[codecweb98]

Es una excelente solución la que propone "Adler". Mas práctica (en programacion, mientras menor código mejor).

Solo un detalle vrael: si te preocula la compatibilidad, deberias usar...

Código XML:

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

Ya que es posible que el explorador no soporte Java Script.