0
好吧，我有一段時間試圖讓我的下一個班級網站做出反應，至少在某種程度上是有幫助的。當視口小於桌面（平板電腦/移動設備）時，我的標題不會更改背景圖像。我可以改變標題的最大高度，但背景圖像不會。任何幫助？媒體查詢無響應？
我的代碼如下，但這裏是一個的jsfiddle鏈接：https://jsfiddle.net/nb0u8ho7/
@charset "utf-8";
/*Browser Reset*/
body, p, header, aside, section, article, h1, h2, h3, nav, div, footer{
padding: 0;
margin: 0;
}
/*Style Start*/
.show-menu{
font-family:Helvetica,Arial, sans-serif;
text-decoration: none;
color:#FFFFFF;
background:#000000;
text-align: center;
padding:10px 0;
position: relative;
top:-20px;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
@media screen and (min-width: 481px) and (max-width: 959px){
header{
max-height:150px;
background-image: url(../images/logoenclosed.jpg)
}
header h3{
postition: relative;
}
Nav{
margin-right: -6em;
}
nav ul li{
position: relative;
top: -138px;
font-size:75%;
margin-bottom: 1em;
}
section{
float: none;
max-width: 80%;
margin-left: 8%;
}
aside {
float: none;
max-width:50px;
}
#dashboard {
display: none;
}
}
@media screen and (max-width : 480px){
aside{
float:none;
width: 760px;
padding-bottom:1%;
}
#dashboard{
display: none;
}
header{
max-height: 150px;
max-width: 480px;
background-size: 100%;
}
header h3{
display: none;
}
header nav{
position: relative;
top:-123px;
left: -286px;
width:100%;
}
header nav ul{
position: static;
display: none;
}
header nav li{
margin-bottom: 0px;
border-top: 1px solid #252122;
}
header nav li a:hover,
header nav li a.hover{
color: #e1e2dd;
background-color:#000000;
border-radius: 0;
}
header nav ul li,
header nav ul li a{
width: 100%;
float: none;
text-align: center;
background-color: #000000;
padding: 0em 0em 0em 3em;
}
.grills{
float: left;
border: solid black 1px;
width: 30px;
margin-bottom: 1em;
height: 30%;
}
.pic_resize{
width: 100%;
max-height: 50%;
}
section{
float: none;
max-width: 80%;
}
.show-menu{
position: relative;
top: 0px;
display: block;
}
#wrapper{
margin: 0;
padding: 0;
width: auto;
}
}
.ads{
float: right;
text-align: center;
font-size: 90%;
color: #b498989;
}
.ads p{
background-color: #29292C;
padding-top: 0.3em;
}
aside{
overflow: hidden;
max-width: 200px;
float: right;
min-height: 900px;
background-color: #29292C;
}
aside p{
padding: 0px 10px;
}
article p{
padding: 1.5em;
}
article div{
align-content: center;
margin-left: 1.676em;
}
body{
color: #6D6A6C;
background-color: #131313;
font: 100% Verdana;
}
body h1, h2, h3{
color: #FFFFFF;
}
#ctrtitle{
text-align: center;
position: relative;
top: 210px;
}
footer{
clear: both;
background-color: #000000;
text-align: center;
font-size: 85%;
min-height: 100px;
}
footer p{
padding-top: 3%;
}
.grills{
float: left;
border: solid black 1px;
width: 22%;
margin-bottom: 1em;
height: 30%;
}
header{
background: #7b7c79;
background:url(../images/header.jpg);
height: 300px;
}
header h1{
text-align: center;
color: #252122;
font-weight: 900;
font-size: 2.5em;
margin: 0;
}
.lead{
font-family: Georgia;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
nav{
align-content: center;
padding: 14.6em 0 0 17.9em;
}
nav ul{
text-align: center;
margin: 0em 5em 0 -16em;
list-style: none;
}
nav ul li{
position: relative;
padding: 0 2em 0 0;
float: left;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav ul li.hover a{
background-image: url(../images/nav/nav_1_invert.jpg);
background-size: cover;
transition: background-image .5s ease-out; /*<-- this line will produce a transition */
color: #483838;
}
nav ul li a {
background-image: url(../images/nav/nav_1.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position: center;
font-size:110%;
display: block;
color: #ffffff;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
padding:0.6em 0.9em 0.6em 0.7em;/* the same spacing as before */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
}
nav ul li:hover ul a:hover,
nav ul li.hover ul a:hover,
nav ul li.hover ul a:focus,
nav ul li.hover ul a:active {
background-image: url(../images/nav/place_holder.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 8px 8px 00px;/* dog-ears the top, flattens the bottom */
text-decoration: none;
margin-left:-1px;/* pull them in close! */
white-space: nowrap;/* don't let long menu selections fall to the next line – messes with the display! */
outline:0;/* some browsers will outline a link – we would rather it not */
color:white;
}
p{
margin-bottom: 1.2em;
}
#pageholder{
background-image: url(../images/nav/place_holder.jpg);
background-size: cover;
background-size: 121px 50px;
pointer-events: none;
cursor: default;
}
.pic_resize{
width: 100%;
max-height: 35%;
}
.rgt{
float: right;
max-width: 45%;
padding: 0.3em;
}
section{
padding: 10px;
float: left;
max-width: 65%;
}
.text{
max-width: 80%;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
background-color: #403E3A;
}
我不確知到底是什麼毛病我的編碼，但我會在所有得到任何幫助。
感謝， -Dark_nemesis
不知道它是否有關，但你有'頭H3 {postition：相對的;這可能會給你帶來麻煩。 – Dekel
我已刪除該部分，而且它似乎仍具有相同的效果。其實我試圖移動一個句子，使它顯示在標題內。那也失敗了。 –