Ajuste de resolucion de pantalla

[xlos_mas_pro]

Hola se que hay formas de ajustar la resolucione de pantalla con % y otras con re direcciones según tu resolución pero eso no es lo que quiero se que no existe un script que funcione tipo varita mágica y que cambie tu tamaño de el sitio por el de la pantalla aun que si lo hay por favor díganme XD !!! pero lo que quiero hacer es por ej si es que existe un script que te detecte la resolución de pantalla y ocupe un css diferenta para cada resolucion ej si la resolucion de mi monitor es de 800x600 que el script elija el css que sea 800.css y si es de 1024 el css que sea 1024.css y haci con los css que le ponga y obviamente para no estar haciendo unos 50 css, que el script tenga un css por defecto por ej si la pantalla es nose por decir algo de 640x370 para no hacer un css tan chico que me aplique un css por defecto


Muchas gracias de ante mano ya que es demaciado lo que pido pero e cambiado bastantes veses el diseño de mi pagina y me doy cuenta que lo que de verdad quiero es un sitio adaptable GRACIAS

[hackjose]

Hola amigo pues la verdad es que si me gusto tu tema, bueno con PHP no vas a consegir eso por que? Por que es del lado del servidor,No del lado del cliente mmm del cliente?Bien la respuesta es JavaScript segun lo que recuerdo con JavaScript si se puede

[xlos_mas_pro]

Gracias pero lo e buscado y no lo encuentro por algo cree el tema para saber si existe si alguien lo tiene y si me lo puede dar no creo que sea tan complicado pensandolo bien debe ser algo parecido al ejemplo de las redirecciones pero con el css y eso si que no lo se hacer

[xlos_mas_pro]

lo encontre ahora solo me queda hacer que si es una resolucion menor o mayor a las dadas me tire un css por defecto ya que no se mucho de JS nesesito su ayuda

// JavaScript Document
<!-- Original: Blackprince (todoexpertos) ([email protected]) -->
<!-- WebSite:http://www.pc-click.com.mx -->

<!-- Begin
//alert('Tu resolucion es ' + screen.width + ' x ' + screen.height + '');
if (screen.width == 640) {
document.write('<link rel="stylesheet" type="text/css" href="640.css">');
alert("Resolucion en 640 x 480 Deberia ser llamado");
}
if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="css/800.css">');
alert("Resolucion en 800 x 600 deberia ser llamado");
}
if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="css/1024.css">');
alert("Resolucion en 1024 x 768 Deberia ser llamado");
}
if (screen.width == 1280) {
document.write('<link rel="stylesheet" type="text/css" href="css/1280.css">');
alert("Resolcuion en 1280 x 960 Deberia ser llamado");
}
if (screen.width == 1600) {
document.write('<link rel="stylesheet" type="text/css" href="css/1600.css">');
alert("Resoilucion en 1600 x 1200 Deberia ser llamado.");
}
// End -->

[xlos_mas_pro]

Como hago en javascript en ese codigo algo como si la resolucion>1600 me tire uno por defecto y si la resolucion<640 me tiro otro por defecto

[Ronruby]

Iniciado por xlos_mas_pro

Como hago en javascript en ese codigo algo como si la resolucion>1600 me tire uno por defecto y si la resolucion<640 me tiro otro por defecto

Agrega un condicional mas con lo que deseas.

Pero, creo que lo estas haciendo mal. ¿Para que quieres tener varios css para cada resolución? Si diseñas bien tu sitio y lo maquetas correctamente no hay necesidad de tener un CSS diferente para cada resolución.

PD: Este tema no es de PHP, es de Javascript.

[xlos_mas_pro]

Buen como JS es parecido a php en sentido operadores supongo hice el codigo y me quedo algo haci alguien me puede decir si esta correcto

// LE AÑADI LO QUE ESTA EN ROJO
if(screen.width < 640){
document.write('<link rel="stylesheet" type="text/css" href="css/menor.css">');
}
if(screen.width > 1600){

document.write('<link rel="stylesheet" type="text/css" href="cssmayor.css">');

}
if (screen.width == 640) {
document.write('<link rel="stylesheet" type="text/css" href="css/640.css">');
alert(" Usted utiliza un resolucion 640x480 demaciado pequeña ");
}
if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="css/800.css">');
alert("Usted utiliza una resolucion en 800 x 600 Estandar Mundosic");
}
if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="css/1024.css">');
alert("Resolucion en 1024 x 768 Normal para el sitio");
}
if (screen.width == 1280) {
document.write('<link rel="stylesheet" type="text/css" href="css/1280.css">');
alert("Resolcuion en 1280 x 960 Normal para el sitio");
}
if (screen.width == 1600) {
document.write('<link rel="stylesheet" type="text/css" href="css/1600.css">');
alert("Resoilucion en 1600 x 1200 Normal para el sitio");
}
if(screen.width > 1600){

document.write('<link rel="stylesheet" type="text/css" href="css/640.css">');

}

[xlos_mas_pro]

Si se que si lo diseño bien se va a ver bn en todas las resuluciones pero mi interes es que calse en todas las resoluciones que quede justo bueno no justo si no no tan pequeño no tan grande lo podria hacer de 800x600 pero que pasa si alguien tiene una resolucion de 640

y disculpen por poner el tema aqui que no sabia con que se podia hace esto

[mariomon17]

Se puede lograr con el atributo media del tag link.
Por ejemplo:

Código HTML:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="example.css" />
 

Saludos :)

PD: esto pertenece a CSS2, valido en todos los navegadores http://www.w3.org/TR/css3-mediaqueries/