jquery - 根据屏幕分辨率在javascript中更改CSS类的高度和宽度

Question

我希望 div 类“内容”的大小根据用户屏幕分辨率的大小而改变。

到目前为止，我已经写了这个 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'

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

Answer 1

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

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

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

话虽如此，您最好查看浏览器大小，而不是屏幕分辨率。无论我的屏幕大小如何，您的内容不应该响应我的浏览器大小吗？我不会让我的浏览器全屏显示。

最后，查看css 媒体查询甚至响应浏览器大小。有很多更好的方法可以做到这一点。

Answer 2

您可以尝试使用 jQuery 和 CSS

   function checkWindowSize() {  

    if ( $(window).width() > 1800 ) {  
        $('content').addClass('large');  
    }  
    else {  
        $('content').removeClass('large');  
    }  

}  

$(window).resize(checkWindowSize);  

对于 CSS，您需要像这样写出来：

#content{  

}  

.large #content{  

}  

这是一个教程来源