Question

我已经在我的.css文件中找到了这个...

@media (min-width: 576px) { 
    .mt-5-xs {  margin-top: 5px; }
    .mt-10-xs {  margin-top: 10px; }
    .mb-5-xs { margin-bottom: 5px; }
    .mb-10-xs {  margin-bottom: 10px; }
}

@media (min-width: 768px) {  
    .mt-5-sm { margin-top: 5px; }
    .mt-10-sm { margin-top: 10px; }
    .mb-5-sm {  margin-bottom: 5px; }
    .mb-10-sm { margin-bottom: 10px; }
}

然后在HTML中：

<div class="mt-5-xs mt-5-sm">
    <button ...></button>
</div>

但是，margin-top无法在小屏幕上呈现。当我查看开发工具中的样式时，它们甚至都不会显示出来。这就像css中不存在的课程一样。我知道html页面可以访问整个.css文件，因为它是所有其他类的所在，并且它们都可以正常工作。

我做错了什么，只是不确定是什么。

Answer 1

根据您发布的代码，您的HTML代码存在的问题不是CSS，因为您必须在div中添加class =“”属性

<div class="mt-5-xs mt-5-sm">
    <button ...></button>
</div>

更新：正如其他人提到的那样，如果您在576px以下查看，那么您应该添加@media (max-width:575px)或者也可以添加576px。

Answer 2

尝试@media only screen and (min-width: 576px)。

我的媒体CSS有什么问题？

2 个答案: