如何根据屏幕分辨率的不同 ，调用不同的css样式？

我的代码如下

 function center(){
            //判断显示器分辨率
            var winWidth  = document.documentElement.clientWidth;
            var winHeight = document.documentElement.clientHeight;

            if((winWidth==1920)&&(winHeight==985)){
                $("#css").attr("href","page/common/css/logo_style2.css");
            }else if((winWidth==1366)&&(winHeight==673)){
                $("#css").attr("href","page/common/css/logo_style1.css");
            }
        }

我在那个路径下，也写了两个css,为什么我换显示器时，这个不起作用，永远是开头定义的那个css样式。

 <title>根据分辨率调整样式大小</title>

<link href="page/common/css/logo_style1.css" type=text/css rel=stylesheet />

请问怎么解决？

$("#css").attr("href"这是什么？
如果是动态添加link节点，应该是下面这样
 $("<link>")
    .attr({ rel: "stylesheet",
        type: "text/css",
        href: "page/common/css/logo_style2.css"
    })
    .appendTo("head");