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 media queries甚至回复浏览器大小。有更好的方法可以做到这一点。

Answer 2

您可以尝试使用jQuery和CSS

   function checkWindowSize() {  

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

}  

$(window).resize(checkWindowSize);

对于CSS，您需要将其写出来：

#content{  

}  

.large #content{  

}

这是一个教程Source

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

2 个答案: