好吧，伙计们，我有一段时间试图让我的下一个课程网站做出回应，至少在某种程度上是有帮助的。当视口小于桌面（平板电脑/移动设备）时，我的标题不会更改背景图像。我可以让标题的最大高度改变，但背景图像不会。有什么帮助吗？
我的代码如下，但这里有一个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
答案 0 :(得分：0)
尝试在Sample 1:
1 AJ 552 O 9/28/2016 0:0:0 6 PSI KTL 0 GK 2 9/28/2016 7:20:0 9/28/2016 8:35:0 O20YEARS 32.2400
标记中添加此内容：
<head>答案 1 :(得分：0)
在做了一些挖掘之后，我最终添加了以下几行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/index.css" rel="stylesheet" type="text/css">
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width:959px)">
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">
并从我之前的CSS媒体查询中获取所有CSS编码，然后制作另外两个单独的.CSS文件。这似乎已经解决了这个问题，至少到目前为止。谢谢大家的帮助。
P.S。为了防止有人最终通过这个试图找出类似问题的解决方案，这里有一些教育：
我来到这个解决方案，因为我读到了某个地方（我相信它在这里是stackoverflow）问题可能是在我添加“（min-width：px”）和（max-width）：部分到我之前媒体查询我的普通“桌面”版本也具有与媒体查询相同的宽度。例如。我的桌面版也有480px和959px的宽度。这使我的网站使用我的桌面版CSS进行所有三个查询。我不是肯定的是这是为什么我的工作不起作用的实际原因，但这让我尝试了不同的方式，而且似乎有效。如果我错了，请纠正我，因为我不想误导任何人。
谢谢，
Dark_nemesis