@media screen not moving for mobile

Question

我在我的CSS中使用媒體屏幕查詢，但問題是它不是爲移動渲染的。它呈現電腦屏幕尺寸，但是當涉及到移動設備時，它不起作用。

這裏是我的CSS

.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; 
} 

} 

有了這個我的頭

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

我所試圖做的是改變.wrap填充和它不工作。誰能告訴我爲什麼它不起作用？

Answer 1

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

你忘了@media中的大括號。

Answer 2

移動響應你已經添加這些東西：

在標題：

// 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"/> 

在CSS：

@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 
}