Question

我希望有人可以了解我将如何在jQuery，css等中做到这一点。

我有一个宽度为900像素的网站。但是如果用户在那里展开宽度为1140像素或更多的窗口，我希望网站设置宽度为1440像素。之间没有任何介绍，原因是因为我使用的是jQuery quicksand插件，我希望一切都能完美契合。

Answer 1

媒体查询确实是要走的路;没有链接或代码示例，这样的东西应该让你开始，在你的css：

#someSelector {width:900px;}//all the css here for less than 1140px

@media all and (min-width:1139px) {//css here for 1140 and up
    #someSelector {width:1140px;}
}

Answer 2

我会使用媒体查询，你可以find info here。他们很漂亮。

Answer 3

如果你只是想用jQuery和CSS做这个，你可以尝试以下（这非常简单，不是最好的方法，但满足你的要求）

$(document).ready(function(){
  $(window).resize(function(){
    if($(window).width() >= '1440'){
      $("#wrapper").css('width','1440px');
    } else {
      $("#wrapper").css('width','900px');
    }
  });
});

或者，你也可以试试这个，这样可以通过嵌套你的css来更容易地改变布局的其他方面：

<强> CSS

#wrapper_small { width: 900px; }
#wrapper_large { width: 1440px; }

<强>的jQuery

$(document).ready(function(){
  $(window).resize(function(){
    if($(window).width() >= '1440'){
      $("#wrapper_small").attr('id','wrapper_large');
    } else {
      $("#wrapper_large").attr('id','wrapper_small');
    }
  });
});

Answer 4

通过在css中添加类似内容来创建媒体查询：

@media screen and (min-width:1400px;) 

{
   #div {
   max-width:1440px;
   width:100%;
   }
}

响应式CSS - 两种尺寸？

4 个答案: