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; }
    }

尝试更新移动设备上的标头大小，但CSS没有响应。我想念什么吗？

1 个答案: