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

【问题标题】：Change CSS Class height and width in javascript depending on screen res根据屏幕分辨率在 javascript 中更改 CSS 类的高度和宽度
【发布时间】：2013-04-06 23:13:20
【问题描述】：

我希望 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'

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

【问题讨论】：

您最好查看浏览器大小，而不是屏幕分辨率。无论我的屏幕大小如何，您的内容不应该响应我的浏览器大小吗？我没有让我的浏览器全屏显示。
你为什么不使用媒体查询？
目前我的编码水平很差。现在我会研究媒体查询...

标签： jquery screen-resolution

【解决方案1】：

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

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

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

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

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

【讨论】：

你想知道如何设置高度和宽度吗？使用我向您展示的两种 jquery 方法。 $(".content").width(560); $(".content").height(315);

【解决方案2】：

你可以尝试只使用 jQuery 和 CSS

   function checkWindowSize() {  

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

}  

$(window).resize(checkWindowSize);

对于 CSS，您需要这样写：

#content{  

}  

.large #content{  

}

这里有教程Source

【讨论】：