jquery – 根据屏幕res更改javascript中的CSS类高度和宽度

我希望div类’content’的大小根据用户屏幕分辨率的大小而改变.

到目前为止我写了这个javascript

function resize()
{

    if ((screen.width>1024)) { $(".content").style.width = 560 + "px"; $(".content").style.height = 315 + "px" }
    if ((screen.width>1280)) { $(".content").style.width = 640 + "px"; $(".content").style.height = 360 + "px" }
    else { $(".content").style.width = 853 + "px"; $(".content").style.height = 480 + "px" }
};

显然在html中我有类’.content’

为什么这段代码不起作用？

解决方法

这里你的具体问题是你正在混合使用jQuery和原始javascript.

要使用jQuery设置元素的宽度,请使用width()或css()方法：

$(".content").width(560);
$(".content").css('width',560);

话虽如此,您可能最好不要查看浏览器大小,而不是屏幕分辨率.无论我的屏幕尺寸如何,您的内容都不应该响应浏览器的大小？我不保持浏览器全屏.

最后,看看css media queries甚至回应浏览器大小.有更好的方法来做到这一点.