css - 关于当用户的屏幕分辨率大于 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/