2016-03-04 95 views
0

我設立的1000像素,825px,760px和最大寬度媒體查詢。一切工作正常,除了在調整相對於標識導航的填充760像素媒體查詢一條線,以移動導航鏈接下面的標誌,而不是默認的對準與標誌。 這是「導航」這是問題的意見下的最後一行。 -媒體查詢重寫

/* Navigation */ 
    nav { padding-top: 80px; } 
    nav > ul { padding-left: 10px; } 
    } 

一切是正確縮放頁面上,除了這個填充調整是覆蓋所有其他大寬度媒體查詢。因此,導航在所有頁面窗口尺寸下都低於徽標,而且只能在760像素的尺寸上顯示。我相信有什麼不對的760px查詢,是因爲當我刪除它來測試尺寸較大的,他們像預期的那樣,與標識一致的導航。

/* Media Queries */ 

@media screen and (max-width: 1000px) { 

    h1 { font-size: 2.4em; } 

    /* Header */ 
    header div.hero { left: 56%; } 
    header div.hero h1{ margin-bottom: 20px; } 

    /* Section-Atmosphere */ 
    section.atmosphere article { padding-left: 400px; background-size: 375px auto; } 

} 

@media screen and (max-width: 825px) { 

    h1 { font-size: 2.2em; } 

    /* Header */ 
    header { height: 300px; background-image: url(../images/banner_825.jpg); } 
    header div.hero { top:120px; left:48%; } 

    /* Section - Atmosphere */ 
    section.atmosphere article { padding-left: 325px; background-size: 300px auto; } 

    /* Section- How To */ 
    section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em; } 
    section.how-to blockquote p.credit { font-size: .85em; } 
} 


@media screen and (max-width: 760px) { 
    h1 { font-size: 1.8em; } 
    h2 { font-size: 1.4em; } 
    h3 { font-size: 1.1em; } 
    a.btn { font-size: 1em; } 
} 

/* Header */ 

header a.logo { width: 145px;height: 60px; } 
header div.hero { top: 140px; left:48%; } 

/* Section - Main */ 
section.main { margin-top: 10px; margin-bottom: 10px; } 
section.main aside div.content { background-size: 55px 55px; padding-top: 60px; } 


/* Section- How To */ 
section.how-to aside div.content img { width: 85%; } 

/* Navigation */ 
nav { padding-top: 80px; } 
nav > ul { padding-left: 10px; } 
} 
+0

不能說沒有看到現場演示,但如果你不想寫查詢低於'760px'您可以用'!important' – Pedram

回答

2

看起來像是在關閉@ media-query之前的打算。

@media screen and (max-width: 760px) { 
    h1 { font-size: 1.8em; } 
    h2 { font-size: 1.4em; } 
    h3 { font-size: 1.1em; } 
    a.btn { font-size: 1em; } 
} // closed here 

它應該在最後關閉。

+0

就在那兒。謝謝你的眼睛! –