Question

我有这段代码：

$(document).ready(function(){

var screen_size=$(window).width();

if(screen_size<1200 && screen_size>=1000)
{
$("#container").width(1000);
}
else if(screen_size>=1900)
{
$("#container").width(1400);
}

});

我决定创建一个宽度为1200px的容器，在某些情况下会根据用户分辨率（实际宽度）调整大小。这段代码很好但我想问一下这是否是一种很好的方法来进行这种操作。谢谢你的帮助！

Answer 1

或许用媒体查询做得更好

@media all and (max-width: 1200px) and (min-width: 1000px){
    #container{
        width:1000px;
    }
}
@media all and (min-width: 1900px){
    #container{
        width:1400px;
    }
}

Answer 2

您可以使用CSS3 Media查询来实现此目的。您可以通过此链接了解它 Link1，Link2，Link3

您可以执行以下操作来设置屏幕

@media only screen and (min-device-width : 1000px) and (max-device-width : 1200px) and (orientation : landscape) {
}

Answer 3

从你的例子中的代码中你肯定应该使用CSS中的媒体查询，因为这是一个纯粹的样式问题。但是，如果您仍然希望采用行为方式，假设您需要根据屏幕大小触发其他行为，则应使用window.matchMedia以重用媒体查询来指示您的“自适应行为”。这在javascript中的行为组件需要在某些媒体上做出不同反应的情况下非常有用。

我创建了一个小例子： http://jsbin.com/wawey/1/edit

jQuery动态容器宽度

3 个答案: