css - 响应式 CSS - 两种尺寸？

Question

我希望有人可以阐明我将如何在 jQuery、css 等中做到这一点。

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

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

我会使用媒体查询，你可以在这里找到信息。他们很漂亮。

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%;
   }
}