android - @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 中的大括号。