爲什麼只有我的大型媒體查詢有效？

我一直在添加媒體查詢，以使我的網站更具響應能力。較大的查詢（最小寬度1536px和最小寬度1224px）可以正常工作。但是，當我將樣式應用於較小尺寸時，根本沒有任何樣式顯示。我不明白爲什麼他們不會，我知道有些東西可能無法修正調整大小和位置，但顏色不起作用，這使我相信我已經做了@media部分本身的錯誤。爲什麼只有我的大型媒體查詢有效？

http://www.codeply.com/go/z6EPsEzrOx

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Header */ 

header .img-responsive { 
    padding-top: 2%; 
    margin-left: auto; 
    margin-right: auto; 
} 


/* Body */ 
#top { 
    background-color: #FA7862; 
    width: 100%; 
    height: auto; 
} 

#top h1, h2 { 
    text-align: center; 
    color: rgb(255, 255, 255); 
} 

#top h1 { 
    font-size: 22px; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    margin-top: 2.5%; 
} 

#top h2 { 
    font-size: 18px; 
    margin-top: 1%; 
} 

#top hr { 
    line-height: 1em; 
} 

.info { 
    position: relative; 
    margin-left: 25%; 
    margin-right: 25%; 
    margin-top: 2.5%; 
    font-size: 16px; 
    color: black; 
    font-family: "Lucida Console", Monaco, monospace; 
    background-color: white; 
    padding: 1% 2% 1% 2%; 
    text-align: justify; 
    border: solid grey 2px; 
} 

.connect { 
    margin-left: 5%; 
    color: white; 
    width: 100; 
    display: inline-block; 
    padding-top: 5%; 
    text-align: center; 
    margin-bottom: 2.5%; 
} 

.connect p { 
    margin-top: 5%; 
    font-size: 16px; 
} 

.create { 
    color: white; 
    width: 100; 
    display: inline-block; 
    text-align: center; 
    margin-left: 12%; 
} 

.create p { 
    margin-top: 7.5%; 
    font-size: 16px; 
} 

.publish { 
    color: white; 
    width: 100; 
    display: inline-block; 
    text-align: center; 
    margin-left: 12%; 
} 

.publish p { 
    margin-top: 7.5%; 
    font-size: 16px; 
} 

/* Bottom */ 

body { 
    background-color: rgb(242, 242, 242); 
} 

#bottom h1 { 
    font-size: 18px; 
    font-family: "MS Sans Serif"; 
    color: black; 
    text-align: center; 
    position: relative; 
} 

#mce-EMAIL 
{ 
    font-size: 20px; 
    font-family: "MS Sans Serif"; 
    color: rgb(153, 153, 153); 
    text-align: center; 
    float: left; 
    width: 70%; 
    height: 40px; 
} 
input.button 
{ 
    font-size: 18px; 
    font-family: "MS Sans Serif"; 
    background-color: #fa7862; 
    color: rgb(255, 255, 255); 
    border: none; 
    text-align: center; 
    width: 30%; 
    height: 40px; 
    float: right; 
} 

#mc_embed_signup 
{ 
    background-color: rgb(255, 255, 255); 
    position: relative; 
    display: block; 
    left: 37.5%; 
    width: 30%; 
    height: 40px; 
} 


/* Footer */ 

footer { 
    text-align: center; 
    position: relative; 
    margin-top: 2%; 
} 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Header */ 

header .img-responsive { 
    padding-top: 2%; 
    margin-left: auto; 
    margin-right: auto; 
} 


/* Body */ 
#top { 
    background-color: #FA7862; 
    width: 100%; 
    height: auto; 
} 

#top h1, h2 { 
    text-align: center; 
    color: rgb(255, 255, 255); 
} 

#top h1 { 
    font-size: 22px; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    margin-top: 2.5%; 
} 

#top h2 { 
    font-size: 18px; 
    margin-top: 1%; 
} 

#top hr { 
    line-height: 1em; 
} 

.info { 
    position: relative; 
    margin-left: 25%; 
    margin-right: 25%; 
    margin-top: 2.5%; 
    font-size: 16px; 
    color: black; 
    font-family: "Lucida Console", Monaco, monospace; 
    background-color: white; 
    padding: 1% 2% 1% 2%; 
    text-align: justify; 
    border: solid grey 2px; 
} 

.connect { 
    margin-left: 5%; 
    color: white; 
    width: 100; 
    display: inline-block; 
    padding-top: 5%; 
    text-align: center; 
    margin-bottom: 2.5%; 
} 

.connect p { 
    margin-top: 5%; 
    font-size: 16px; 
} 

.create { 
    color: white; 
    width: 100; 
    display: inline-block; 
    text-align: center; 
    margin-left: 12%; 
} 

.create p { 
    margin-top: 7.5%; 
    font-size: 16px; 
} 

.publish { 
    color: white; 
    width: 100; 
    display: inline-block; 
    text-align: center; 
    margin-left: 12%; 
} 

.publish p { 
    margin-top: 7.5%; 
    font-size: 16px; 
} 

/* Bottom */ 

body { 
    background-color: rgb(242, 242, 242); 
} 

#bottom h1 { 
    font-size: 18px; 
    font-family: "MS Sans Serif"; 
    color: black; 
    text-align: center; 
    position: relative; 
} 

#mce-EMAIL 
{ 
    font-size: 20px; 
    font-family: "MS Sans Serif"; 
    color: rgb(153, 153, 153); 
    text-align: center; 
    float: left; 
    width: 70%; 
    height: 40px; 
} 
input.button 
{ 
    font-size: 18px; 
    font-family: "MS Sans Serif"; 
    background-color: #fa7862; 
    color: rgb(255, 255, 255); 
    border: none; 
    text-align: center; 
    width: 30%; 
    height: 40px; 
    float: right; 
} 

#mc_embed_signup 
{ 
    background-color: rgb(255, 255, 255); 
    position: relative; 
    display: block; 
    left: 37.5%; 
    width: 30%; 
    height: 40px; 
} 


/* Footer */ 

footer { 
    text-align: center; 
    position: relative; 
    margin-top: 2%; 
} 
}

來源

2015-11-04 Cameron Hall

您已對每種樣式設置最小寬度，因此當寬度變小時沒有剩餘樣式。 – AntiHeadshot

對，但如果我將屏幕尺寸調整爲1000像素，我仍然沒有任何樣式。但在1300年它有所有的風格。 –

您尚未定義小型設備的媒體查詢。你的最小寬度是768px。沒有媒體查詢適用於小於768像素的設備 – user2584538

使用min-width和max-width代替min-device-width和max-device-width。

來源

2015-11-04 15:49:40 hungerstar

好的。它可以以任何方式工作，但有什麼不同？ –

**設備寬度：**描述輸出設備的寬度（表示整個屏幕或頁面，而不僅僅是渲染區域，如文檔窗口）。 **寬度：**寬度媒體功能描述了輸出設備的渲染表面的寬度（例如文檔窗口的寬度或打印機上的頁面框的寬度）。 – hungerstar

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml – connexo

解決這個問題的一種方法是爲較大的屏幕尺寸編寫樣式，然後使用較小屏幕的媒體查詢進行調整。正如你的代碼所示，1024和1224之間存在差距。所以我建議你在媒體查詢之外首先在1224設計你的頁面。然後使用媒體查詢爲1024，第二個爲768.可能你還需要定位更小的尺寸。將每個連續的小尺寸放在另一個的下方，並使用最小寬度：

//css code for large screen 
//then: 

@media screen and (min-width:1024px){//styles} 

@media screen and (min-width:768px) {//styles} 

@media screen and (min-width:400px) {//styles}

來源

2015-11-04 16:41:49 Cruiser

爲什麼只有我的大型媒體查詢有效？

回答

相關問題