@media画面がモバイル用にレンダリングされない

Question

私はCSSでメディア画面のクエリを使用していますが、モバイル用にレンダリングされていないという問題があります。コンピュータの画面サイズをレンダリングしますが、モバイルデバイスの場合は動作しません。ここで

は私のCSSは、私がやろうとしています何

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

私のヘッダにこれにより

.featured-post-image{ 
position:absolute; 
left:0; 
right:0; 
width:100% !important; 
height:100%; 
max-height:700px !important; 
} 

.wrap{ 
position:relative; 
padding-top:37em; 
} 

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 

.wrap{ 
padding-top: 5em !important; 
} 

} 

ある.wrapにパディングを変更し、それが働いていないです。誰も私になぜそれが動作していないと言うことができますか？

Answer 1

@media (min-width: 320px) and (max-width: 480px){ 
    .wrap { padding-top: 5em !important; } 
} 

@mediaに中括弧を忘れてしまった。

Answer 2

Mobileが応答あなたがこれらのものを追加している場合：CSSで

// Browser rendering properly 
<meta charset="utf-8"> 

// Select device view port width 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

// for device touch gesture 
<meta name="HandheldFriendly" content="true"/> 

：ヘッダに

@media screen and (min-width:992px) and (max-width:1200px){ 

    // css goes here 
} 

@media screen and (min-width:768px) and (max-width:991px){ 

    // css goes here 
} 

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

    // css goes here 
}