I want to define a css stylesheet or add a body class dependant on viewport size

I have a wordpress website with w开发者_运维百科hich I wish to provide content via an iframe on facebook..

Without using a wordpress plugin, I would like to know if I provide a function in jquery that basically says if viewport is equal to 520px then either load this css file or add this body class..

Also, if viewport is = to 520px then hide this element..

I think this can be done but after a lot of searching, I cannot seem to find a definative answer..

If anyone can help, i would very much appreciate it..

Kindest regards,

Danny

For CSS, use media queries, EG:

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

Note that IE 6, 7, and 8 don't support this, so for IE use:

<!--[if lt IE 9]>
<link href="MegaFubarBrowser.css" media="screen" rel="stylesheet">
<![endif]-->

For JS, use code like:

if (screen.width <= 520) {
    $('.bigStuff').hide ();
}