@media屏幕无法呈现移动设备

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
}