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 ... */
}

}

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

参考：http://www.w3.org/TR/css3-mediaqueries/

关于当用户的屏幕分辨率大于960px时，保持流体布局相同

1 个答案: