1

我正在尝试为#home-content-wrap 设置 2 个不同的宽度。如果屏幕尺寸小于 768px，我最终想要的是能够将 home-content-wrap div 设置为 80% 宽度！它像是：

1156 宽度：80% <1156 宽度：100% <768 宽度：80%

几个注意事项：但 <768 宽度：80% 不能正常工作！如果我删除 >1156 条件，则 <768 有效！如果您仔细查看代码，您会发现 <768 条件会更改文本颜色但不会更改宽度……或者也不会更改 bg 颜色……

这是我的页面/ div 样式：

 *{margin:0;padding:0;text-align:center;}
 #wrap{width:100%;height:100%;}
 #home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto;   
 border:1px solid blue;}
 /**Responsive Columns**/

 .home_lay_1_of_2 {
width: 49.5%;  
margin-left:0.50%; background:lightblue;
 }
 .home_lay_1_of_3 {
width: 49.5%;  background:grey;
 }

这是断点：

 /****breakpoint 1**/
 @media only screen and (max-width: 768px) {
 #home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto; color: 
 yellow; border:1px solid yellow;}

.home-txt{float:left; width:100%; height:500px;  }

 .home_lay_1_of_2 {
width: 100%;   
margin-left:0; 
 }
.home_lay_1_of_3 {
width: 100%;   
}
}

/***Breakpoint 2***/
@media only screen and (max-width: 1156px) {
#home-content-wrap{width:100%; max-width:1600px; height:auto; margin:50px auto;  
border:1px solid black;}
}

这是我的响应设置：

.section {
clear: both;
padding: 0;
margin: 0;
 }

.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}

.col {
display: block;
float:left;
}

这是小提琴http://jsfiddle.net/GQgNx/

这里有什么问题？

4

2 回答 2

1

我已经用一些更简洁的代码更新了你的小提琴。这只是您的媒体查询设置方式的问题。

你的大纲应该是这样的：

/** narrow code default **/

@media only screen and (min-width:768px) {
}
@media only screen and (min-width:768px) and (max-width:1156px) {
}
@media only screen and (min-width:1156px) {
}

更新了小提琴http://jsfiddle.net/GQgNx/5/

于 2013-10-03T19:36:34.167 回答
1

将第二个断点媒体查询更改为：

@media only screen and (min-width: 768px) and (max-width: 1156px) {
   #home-content-wrap {
      border: 1px solid black;
      height: auto; 
      margin: 50px auto;
      max-width: 1600px; 
      width: 100%; 
   }
}

示例：http: //jsfiddle.net/GQgNx/2/

于 2013-10-03T19:10:13.387 回答