css - 关于在用户屏幕分辨率大于 960px 时保持我的流体布局不变

Question

您好，我正在使用流体布局网格系统或响应式网页设计。

我喜欢如何使用媒体查询设置所有内容的大小以降低分辨率，但这是我的问题。

我希望用户无论他的屏幕分辨率有多大，宽度都为 960px，这样在他的 iPhone 上查看的用户将获得较小的版本，但是拥有 1000x621 或更高分辨率的用户将保持不变，因此标题 h1 不会滚动.

如有任何帮助，我们将不胜感激

谢谢

这是我的CSS

 @media only screen and (min-width: 769px){

.gridContainer {
width: 89.0217%;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: 0 auto;
}

#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;

 }

 #header h1 {
text-align:right;
 }

#top_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

 #bottom_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

#featured_menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

 #footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;

Answer 1

只需使用媒体查询，例如:

@media (min-width: 1000px){ 

#header h1 {
 /* blah blah ... */
}

}

因此只有视口(viewport)宽度大于 1000px 的用户才会在括号中包含 css 类。您可以使用 min-width 或 max-width。

引用:http://www.w3.org/TR/css3-mediaqueries/