更改CSS类的高度和宽度在javascript中取决于屏幕分辨率

我希望div类的“内容”的大小根据用户的屏幕分辨率的大小而改变。更改CSS类的高度和宽度在javascript中取决于屏幕分辨率

到目前为止，香港专业教育学院写这个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我有类“内容”

为什么不工作的代码？

来源

2013-04-06 user2228313

您可能最好查看浏览器大小，而不是屏幕分辨率。不管我的屏幕大小如何，您的内容是否不会响应浏览器的大小？我不保留我的浏览器全屏。 – jszobody 2013-04-06 23:15:32

你为什么不使用媒体查询？ – robertc 2013-04-06 23:17:21

我现在的编码水平很差。我现在看看媒体查询... – user2228313 2013-04-06 23:19:12

你的具体问题在于你在混合jQuery和原始javascript。

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

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

说了这么多，你可能会更好看浏览器的大小，而不是屏幕分辨率。不管我的屏幕大小如何，您的内容是否不会响应浏览器的大小？我不保留我的浏览器全屏。

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

来源

2013-04-06 23:19:27 jszobody

如何改变高度以及.. – user2228313 2013-04-06 23:22:32

http://api.jquery.com/height/ – jszobody 2013-04-06 23:23:00

你想知道如何设置高度和宽度？使用我展示给你的两个jquery方法。 $（ “内容”）的宽度（560）。 $（ “内容”），高度（315）。 – jszobody 2013-04-06 23:29:02

你可以尝试，只是使用jQuery和CSS

function checkWindowSize() { 

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

} 

$(window).resize(checkWindowSize);

对于你需要写出来这样的CSS：

#content{ 

} 

.large #content{ 

}

这里是一个教程Source

来源

2013-04-07 10:10:35 Giovanni

更改CSS类的高度和宽度在javascript中取决于屏幕分辨率

回答

相关问题