Question

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

1156宽度：80％＆lt; 1156宽度：100％＆lt; 768宽度：80％

几个笔记：但是＆lt; 768宽度：80％不起泡！如果我删除＆gt; 1156条件，则＆lt; 768有效！如果仔细查看代码，你会看到＆lt; 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/

这里有什么问题？

Answer 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/

Answer 2

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

你的大纲应该是这样的：

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

一个div的2个不同的断点不起作用..？

2 个答案: