Tip: JavaScript & CSS

Continuando con el ejemplo anterior:

 http://mredison.wordpress.com/2009/03/29/tip-javascript-screen-resolution/, vamos a realizar la redicción a las hojas de estilo en cascadas de acuerdo a la resolución.

var resolucion = screen.width + "x" + screen.height;

switch (resolucion) {

    case "1600x1200":
        document.write('<link rel="stylesheet" type="text/css" href="css/1600x1200.css">');
        break;

    case "1152x864":
        document.write('<link rel="stylesheet" type="text/css" href="css/1152x864.css">');
        break;

    case "1289x960":
        document.write('<link rel="stylesheet" type="text/css" href="css/1289x960.css">');
        break;

    case "1280x800":
        document.write('<link rel="stylesheet" type="text/css" href="css/1280x800.css">');
        break;

    case "1024x768":
        document.write('<link rel="stylesheet" type="text/css" href="css/1024x768.css">');
        break;

    case "800x600":
        document.write('<link rel="stylesheet" type="text/css" href="css/800x600.css">');
        break;

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

}

A continuación crearemos cada css de acuerdo a la resolución que definimos.

Tip: JavaScript Screen Resolution

Como detectar la resolución de tu computadora desde javascript.

<script type="text/javascript">

        var resolucion = screen.width + "x" + screen.height;

        switch(resolucion) {

            case "1600x1200":
                alert("1600x1200");
                break;

            case "1152x864":
                alert("1152x864");
            break;

            case "1600x1200":
            alert("1600x1200");
            break;

            case "1289x960":
                alert("1289x960");
            break;

            case "1280x800":
            alert("1280x800");
            break;

            case "1024x768":
            alert("1024x768");
            break;

            case "800x600":
            alert("800x600");
            break;

        default:
            alert("Resolución no definida");
            break;

        }

    </script>

Con este ejemplo  podemos redireccionar más adelante a un css para que se adapte a dicha resolución.

 

Saludos.