响应式标题不起作用答案

【问题标题】：Responsive header not working响应式标题不起作用
【发布时间】：2018-08-06 02:49:50
【问题描述】：

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

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

桌面视图工作

移动端视图不工作

HTML

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

CSS

.
.
.
*, 
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
     /* 80% of view port width which computes to
      font-size of 10.25px for my laptop screen */
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #777777;
    padding: 3rem;
    box-sizing: border-box;
}

/* HEADER */

.header {
    height: 95vh;
    background-image: 
        linear-gradient(to right bottom,
                      rgba(126,213,111,.8),
                      rgba(40,80,131,.8) ),
        url('../img/hero.jpg'); 
    background-size: cover;
    background-position: top; 

    /*Giving shape to the picture*/
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    /*To make  triangle 50% 0, 100% 100%, 0 100%
    https://bennettfeely.com/clippy/
    */

    position: relative;
}

.header>.logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
}

.header>.logo-box>.logo  {
    height: 3.5rem;
}

.header>.text-box {
    position: absolute;
    top:40%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.header>.text-box>.header-primary {
    color: white;
    text-transform: uppercase;
}

.header>.text-box>.header-primary>.heading-primary-main {
    display: block;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 3.5rem;
    animation-name: moveInleft;
    animation-duration: 1s;
    animation-timing-function: ease-out
}

.header>.text-box>.header-primary>.heading-primary-sub {
    display: block;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 1.74rem;
    animation: moveInRight 1s ease-out;
    backface-visibility: hidden
}
.
.
.

【问题讨论】：

它对我有用。字体大小根据宽度进行调整。 jsfiddle.net/vg4y3kjL
.8vw “工作”，但是当您在桌面视图中时，一切看起来都更大
@samuellawrentz 目前我的工作解决方案是使用媒体查询:(/*Media Queries*/ @media only screen and (max-width: 500px) { html { font-size: 30%; } }

标签： html css responsive-design

【解决方案1】：

您可以尝试这样做。

使用fluid-typography 设置您的font-size

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

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

请查看此链接以获取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。

【讨论】：

【解决方案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;
  }
}

【讨论】：