Html 为什么媒体查询在手机上不起作用？

我在html页面中使用了媒体查询。适用于小屏幕和大于500px的屏幕。这是一个样本

.col-1{宽度：58%；}
.col-2{宽度：25%；}
.col-3{宽度：16%；}
.col-4{宽度：100%；}
@仅介质屏幕和（最小宽度：480px）{
.col-sm-1{宽度：100%；}
}

仅媒体屏幕和（最小宽度：480px）{

需要

@仅媒体屏幕和（最小宽度：480px）{

尝试：

@media only screen and (max-width: 480px) {
 .col-sm-1 {width: 100%;}
 }

当屏幕为480px或更低时，这将仅应用100%的宽度

如果仍然没有快乐，那么尝试：

@media only screen and (max-width: 480px) {
  .col-1,
  .col-2,
  .col-3 {
  width: 100%;
  }
}

---

请记住提及您使用的任何框架的版本。例如bootstrap 3/4。我没有使用任何框架。我使用的是记事本++当然您希望最大宽度：480px如果您只希望规则应用于480px以下抱歉，我在网页中添加了write@medai，但我忘了键入@