Question

我正在跟踪一个教程，他们显示该应用程序具有响应能力，但我无法使它具有响应能力，而且看起来我并不是唯一一个遇到相同问题的人。在视频中，他们展示了在不使用媒体查询的情况下对文本进行响应的能力（我知道如何使用媒体查询来做到这一点）。我试图将html font-size更改为10px和.8vw。。我正在使用rem，因为根据本教程，他不是最好也用于响应性，因为它将获取根值并执行转换，在这种情况下，根将是html

https://jsfiddle.net/wearetamo/zckeynuq/

桌面视图正常工作

移动视图不起作用

HTML

onCompleted

CSS

<header class="header">
            <div class="logo-box">
                <img src="img/logo-white.png" alt="Logo" class="logo">
            </div>

            <div class="text-box">
                <h1 class="header-primary">
                    <span class="heading-primary-main">
                        Outdoors
                    </span>
                    <span class="heading-primary-sub">
                        is where life happens
                    </span>

                    <a href="#" class="btn btn-white btn-animated">Discover our tours</a>
                </h1>
            </div>
        </header>

Answer 1

您可以尝试这样做。

使用fluid-typography设置font-size

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

，然后使用letter-spacing（视口宽度）设置vw。

请访问JSfiddle

的此链接

下面的示例代码。

.header>.text-box>.header-primary>.heading-primary-main {
    display: block;
        font-size: calc(30px + (40 - 30) * ((100vw - 500px) / (1400 - 500)));
        font-weight: 400;
        letter-spacing: 4vw;
        animation-name: moveInleft;
        animation-duration: 1s;
        animation-timing-function: ease-out
}

.header>.text-box>.header-primary>.heading-primary-sub {
    display: block;
        font-size: calc(13px + (18 - 13) * ((100vw - 500px) / (1400 - 500)));;
        font-weight: 400;
        letter-spacing: 1.3vw;
        animation: moveInRight 1s ease-out;
        backface-visibility: hidden;
}

如果使用fluid-typography不能满足您的要求。

我建议您使用“媒体查询”使用可变的字体大小。

请参阅此link。

Answer 2

这是因为字体大小大于窗口宽度

    <span class="heading-primary-main">
                            Outdoors
                        </span>
                        <span class="heading-primary-sub">
                            is where life happens
                        </span>

使这些span字体小于您的窗口宽度，即使font-size：14px或18px

@media (max-width:640px){
  .heading-primary-main{
    font-size:18px; 
  }
  .heading-primary-sub{
    font-size:14px;
  }
}

响应头不起作用

2 个答案: