html - 尝试在移动设备上更新 header 大小，但 CSS 没有响应。我错过了什么吗？

Question

尝试更新 CSS，以便在移动设备上查看时标题会适应并变小。可能缺少某些东西，或者有一些其他 CSS 控制它但不确定在哪里。

我已经尝试查找各种​​代码，但在本地进行测试，仍然没有得到想要的结果。

HTML

<div class="col-12 col-md-auto cta-headline">
        <h2><span class="cta-headline">SIGN UP!</span></h2>
</div>

CSS

.cta-headline {
        color: $white;
        font-weight: 800;
        font-family: "Gilroy", "Helvetica", Helvetica, arial, sans-serif;
        font-size: 25px;
        letter-spacing: 3px;
        margin-bottom: -15px;
        margin-top: -20px;
        @media only screen and (min-width: 450px) and (max-width: 959px) { 
          .cta-headline { font-size: 10px;
          }
        }
    }

与桌面设备相比，我希望在查看移动设备时适当缩小文本。

Answer 1

你在使用 Sass 吗？因为 CSS，您不应该在类中嵌套媒体查询。只需将媒体查询移动到它自己的行，它应该可以工作。

最小和最大宽度也是多余的，最好只删除最小值并保留最大值。如果宽度低于 450px，则创建另一个媒体查询，其中最大宽度为 450px

.cta-headline {
        color: $white;
        font-weight: 800;
        font-family: "Gilroy", "Helvetica", Helvetica, arial, sans-serif;
        font-size: 25px;
        letter-spacing: 3px;
        margin-bottom: -15px;
        margin-top: -20px;
    }
@media only screen and (max-width: 959px) { 
        .cta-headline { font-size: 10px; }
    }