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; }
}
不能說沒有看到現場演示,但如果你不想寫查詢低於'760px'您可以用'!important' – Pedram