メディアクエリが応答しませんか？

Question

さて、私は次のクラスのウェブサイトを反応性の高いものにしようとしています。ビューポートがデスクトップ（タブレット/モバイルデバイス）よりも小さい場合、私のヘッダーは背景イメージを変更しません。私はヘッダーの最大高さを変更することができますが、背景イメージは変わりません。どんな助け？

私のコードは以下の通りですが、ここでは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; 
} 

私はいったい私のコーディングと間違っているものになどわからないが、私はまったく助けをいただければ幸いです。

おかげで、<head>タグでこれを追加すること -Dark_nemesis

Answer 1

試してみてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Answer 2

いくつかの掘削を行った後、私は次のコード行追加してしまった：

<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コードを取り込み、2つの個別の.CSSファイルを作成しました。とにかく、これは問題の世話をしたようです。皆さんのお手伝いをありがとうございます。

P.S.ちょうど誰かがこれを通って同様の問題の解決策を見つけ出そうとしている場合には、いくつかの教育があります：

私はどこか（私はそれがstackoverflow上にあったと信じています）私のメディアクエリーに "（min-width：px"）と（max-width）：部分を追加する前に、私の通常の "デスクトップ"バージョンもメディアクエリーと同じ幅を持っていたことが問題です。例えば。デスクトップ版の幅も480px、959pxでした。これにより、私のサイトでは3つのクエリすべてに対してデスクトップ版のCSSを使用していました。私は肯定的ではない、これはなぜ私が働いていなかったのかという実際の理由ですが、それは私に違ったやり方を試みました。もし私が間違っていたら、私は何かを誰かに誤報させようとしていないので、私を修正してください。

おかげで、

Dark_nemesis