Html @仅介质屏幕和（最大宽度：--px）不工作？

当我的网页在宽度小于620px的设备上打开时，但“宽度”的媒体查询不起作用时，我想为它提供样式。它适用于“最大高度”，但不适用于“宽度”。 宽度的媒体查询没有显示在dev工具中，尽管它显示在dev的源代码中

@media only screen and (max-width : 620px) {
div.enterdetails
{
    top:32% !important;
}
div.headline{
    top:19% !important;
}
.select-btn{
    width:129px !important;
}   }

这是片段

.headline{
位置：相对位置；
顶部：0px；
左：20%；
宽度：61%；
字号：600；
颜色：黑色；
字体大小：32px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文本对齐：居中；
文本最后对齐：居中；
}
.enterdetails{
位置：相对位置；
最高：4%；
宽度：100%；
高度：113px；
背景色：rgb（0,0,0）；
}
.slctstyle
{
位置：相对位置；
最高：35%；
宽度：91%；
身高：96%；
左：7%；
颜色：白色；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.选择btn{
高度：32px；
宽度：126px；
}
@仅介质屏幕和（最大宽度：620px）{
部门详情
{
排名：32%！重要；
}
部门标题{
排名：19%！重要；
}
.选择btn{
宽度：129px！重要；
}}

嗨，让我们选择数据！
A.
B
A.
B
A.
B

您必须在html的头部添加元视口标记

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

---

“初始比例”属性控制首次加载页面时的缩放级别。如果此标记不存在，则当调整大小正在更改比例但未进行自适应调整时。

尝试更改。在@media only屏幕内选择btn'为'200px'或可能添加一个'background color:red'，当屏幕为620px或更低时，您将看到不同

---

我认为@media only屏幕工作正常，但“top”属性不工作。

媒体查询工作正常。您可以将其检查为

的
宽度
。选择btn
将
126px
更改为
129px
。由于变化很小，可能不太清楚，但您可以通过检查页面来验证它。

但是，
top
属性不会对页面造成任何更改。

但这并不是因为媒体的质疑。如果将
top
中的单元用作
px
而不是
%
，则在调整大小时可以看到更改。发生这种情况的原因是由于
div
的定位。当您给出
10%
时，它表示包含块高度的10%，在本例中为
body
。因此，您无法使用
%
查看更改。如果您给出
高度：100vh
，然后应用
顶部：10%
它应该可以工作。

您可以参考
欢迎来到Stack Overflow！我们需要更多的信息。什么是不在
媒体
查询中的CSS？你有可以发布的HTML吗？就你的问题而言，甚至开始提供帮助都远远不够——因为媒体的查询看起来是正确的。请阅读：简言之，想象一下，您必须仅使用您提供给我们的内容来调试问题。不好玩，对吧？谢谢你在我的问题中指出缺乏信息。现在我更新了我的问题。你可以看一下选择器：
。选择按钮
和实际的类
class=“select btn”
谢谢你的演示，但媒体查询不起作用。在我看到你的答案之前，我已经创建了一个背景变为红色的小提琴，所以我没有创建答案-这是小提琴：