响应式CSS - 两组大小？

我希望有人可以阐明我将如何做到这一点在jQuery，CSS等。响应式CSS - 两组大小？

我有一个网站的宽度为900像素。但是，如果用户在这里扩展窗口的宽度为1140像素或更多，我希望网站的宽度为1440像素。之间没有什么，因为我使用jQuery quicksand插件，我希望一切都完美适合。

来源

2012-07-10 ritch

让我看看，如果我得到这个，你的网站内容应该是900px宽，直到1140px内容应该是1440px（比屏幕宽）？ – 2012-07-10 18:19:30

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

来源

2012-07-10 18:19:14 dezman

只要您正在开发与CSS3兼容的浏览器，这绝对是更好的方法。 – johnmadrak 2012-07-10 18:28:59

如果你只是想使用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'); 
    } 
    }); 
});

来源

2012-07-10 18:22:23 johnmadrak

媒体查询确实是要走的路;由于没有链接或代码示例，这样的事情应该让你开始，在你的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;} 
}

来源

2012-07-10 18:27:40 folktrash

通过把这样的事情在你的CSS创建一个媒体查询：

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

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

来源

2012-07-10 18:30:29 imakeitpretty

响应式CSS - 两组大小？

回答

相关问题