Conditional CSS on screen resolution

[sokpet]

Hello

How to implement conditional CSS depending on screen resolution using the following script? :

[removed]
   var screenwidth = screen.width;
   if (screenwidth <= 1024) {
     [removed]('<link rel="stylesheet" href="global.css" type="text/css" media="screen" />');
   }
   else {
     [removed]('<link rel="stylesheet" href="globalNEW.css" type="text/css" media="screen" />');
   }
[removed]

Do I have to modify header.php and header.tpl or something esle?

[sokpet]

Nobody knows?

Is it so difficult to do it?

[sokpet]

Well for the moment I made the changes only in header.tpl as follows:

{literal}
[removed]
var screenwidth = screen.width;
if (screenwidth <= 1024) {
[removed]('<link href="http://myweb//themes/mytheme/css/global1.css" rel="stylesheet" type="text/css" />');
}
else {
[removed]('<link href="http://myweb//themes/mytheme/css/global.css" rel="stylesheet" type="text/css" />');
}
[removed]
{/literal}

It works perfect. But I think it is a bit "dirty" way as it uses absolute links. So how to assign CSS variables {$css_url} and {$css_url1}???? and where???