一個div的2個不同的斷點不起作用..？

我想設置2個不同的寬度＃home-content-wrap。我最終想要的是如果屏幕尺寸小於768px，可以設置爲home-content-wrap div 80％寬度！它是這樣的：一個div的2個不同的斷點不起作用..？

1156寬度：80％ < 1156寬度：100％ < 768寬度：80％

夫婦的說明：但是< 768寬度：80％沒有按」炒鍋！如果我刪除> 1156條件，然後< 768的作品！如果你看看代碼仔細，你會看到< 768條件改變文字顏色但不寬......與否背景顏色太..

這裏是我的網頁/ 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/

這裏有什麼問題？

來源

2013-10-03 user2045937

http://jsfiddle.net/GQgNx/3/ –

更改第二個斷點媒體查詢：

@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-03 19:10:13 Adrift

你得到它的人！ Thnax！但是我們用這種方法在這裏糾正了什麼？只是爲了學習...... – user2045937

這兩個媒體查詢都有選擇器，它們具有相同的[特異性]（http://www.w3.org/TR/CSS2/cascade.html#specificity），並且因爲第二個查詢被放置在第一個它只是壓倒它。通過添加'（min-width：768px）'子句，您可以同時使用兩種媒體查詢來定位不同的分辨率，從而不會發揮特殊性。 – Adrift

這很清楚！謝謝！ – user2045937

我已經更新了一些乾淨的代碼你的小提琴。這只是您媒體查詢設置方式的一個問題。

你的輪廓應該是這樣的：

/** 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-03 19:36:34

一個div的2個不同的斷點不起作用..？

回答

相關問題