关于当用户的屏幕分辨率大于960像素时保持我的液体布局相同

Question

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

我喜欢我可以通过媒体查询设置较低分辨率的一切尺寸，但这是我的问题。

我希望用户不管他的屏幕分辨率有多大，宽度为960像素，因此在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 ... */ 
} 

} 

因此，只有视口宽度大于1000px的用户才会在括号中包含CSS类。你可以玩最小宽度或最大宽度。

编号：http://www.w3.org/TR/css3-mediaqueries/