css - 我的标题在 iphone 上太大，破坏了布局，无法将其调整为小屏幕

Question

这是我的网站:

www.votgaus.com/tourbillon

在除 iphone 之外的所有屏幕上，一切似乎都运行良好。标题(标题中的黄色TOURBILLON)有letter-spacing ，由于某种原因在桌面上很难欣赏，但在 iphone 上却很多。

无论如何，在 eh iphone 上发生的事情，这个词太大了，让一切都崩溃了:

iphone layout

我已经尝试了很多东西。设置max-width到一个 div，并将标题文本( <h1> )放在里面(并调用 div .limitheader )；试过 -webkit-text-size-adjust:100%;在几乎每个容器或任何我能找到的地方；使用 @media确定它在 iphone 上的样式...

我想我可能把它们都搞砸了，或者只是没有做正确的事情。如果有人能给我一个解决方案，只要它有效(并保持大小刚好适合 iphone 屏幕)，那就太棒了。我也不明白为什么其余内容不简单地填充到右边。无论如何...

更新:我没有更新正确的 CSS 文件。现在问题似乎是这样的:我无法为 letter-spacing 分配不同的值在 @media(min-width:768px)和 @media(max-width:767px) .如果我分配不同的值，它会从较大的屏幕尺寸中获取一个值并将其应用于每个尺寸。

这是我的代码:

HTML

<header>
        <div class="header-content">
            <div class="header-content-inner">
                <div class="limitheader"><h1>TOURBILLON</h1></div>
            </div>
        </div>
    </header>

CSS

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #F9C000;
    background-image: url(../img/header.jpg);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Conduit';
    color: #F9C000;
    letter-spacing: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 100vh;
    -webkit-text-size-adjust:100%;


}

.limitheader {
    max-width: 100vh;
}

header .header-content .header-content-inner hr {
    margin: 30px auto;
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: #F9C000
;
}

@media(min-width:768px) {
    header {
        min-height: 100%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }



    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }
}
@media(max-width:767px) {
    header {
        min-height: 100%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }
header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Conduit';
    color: #F9C000;

    margin-right: auto;
    margin-left: auto;
    max-width: 100vh;
    -webkit-text-size-adjust:100%;


}


    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }
}

谢谢!

Answer 1

尝试这样的事情。 font-size 上的过渡有助于减少字体大小的变化。媒体查询使文本在除最小屏幕之外的所有屏幕上都可见。

header h1 {
  transition: 0.3s font-size;
}

@media (max-width: 400px) {
  header h1 {
    font-size: 21px !important;
  }
}