将浏览器缩小到 iPhone 大小时，如何让英雄文本自行调整大小？

Question

当我缩小浏览器的大小时，我的主文本无法正确调整大小。像这样：

我在这里尝试了 SO 帖子的建议： How can I make text wrap down to the next line, when a user reduces the size of the browser?

但这对我不起作用。这是我关于英雄部分的 style.css 文件部分：

/* === HERO === */

#hero
{
    background: url("/wp-content/themes/threegreenbirds-daniel/images/grass-ground-new.jpg") 50% 0 repeat fixed;
    min-height: 500px;
    padding: 40px 0;
    color: white;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.col-sm-7 {
    text-align: center;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 20%;
    margin-top: -150px;
}

这是 content-hero.php 文件：

<!-- HERO
==========================================================================  -->
<section id="hero" data-type="background" data-speed="5">
   <article>
      <div class="container clearfix">
         <div class="row">
            <div class="col-sm-7 hero-text">
              <h1><?php bloginfo('name'); ?></h1> 
              <p class="lead"><?php bloginfo('description'); ?></p>
            </div>
         </div>
      </div><!-- container -->
   </article>
</section><!-- hero -->

我尝试过使用 col-sm-7 和 word-wrap:normal 类，也尝试过使用 .col-sm-7.hero-text { word-wrap:normal} 类，但都没有奏效对我来说。

我确实在平板电脑尺寸上试过这个：

@media screen and (max-width: 991px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        position: relative;
        background: none;
    }
}

它有效，但对于 iphone 大小的字母仍然被切断，尽管有这个：

@media screen and (max-width: 568px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        position: relative;
        background: none;
      }
}

是不是 568px 的尺寸不合适？为什么它不适用于智能手机尺寸？

然后我决定按照以下建议将 .hero-text 保留在布局流程中，并开发了这个：

#hero
{
    background: url("/wp-content/themes/threegreenbirds-daniel/images/grass-ground-new.jpg") 50% 0 repeat fixed;
    min-height: 500px;
    padding: 40px 0;
    color: white;
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container-clearfix {
    position: relative;
}

.col-sm-7 {
    text-align: center;
}

.hero-text {
    top: 50%;
    left: 20%;
    margin-top: 90px;
}

/* === MEDIA QUERIES === */

@media screen and (max-width: 991px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        margin-left: 100px;
        position: relative;
        background: none;
    }
}

@media screen and (max-width: 600px) {
    .logged-in .navbar-fixed-top {
        top: 42px;
    }
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        margin-left: 100px;
        position: relative;
        background: none;
    }
}

@media screen and (max-width: 568px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        position: relative;
        background: none;
      }
}

但是当我将屏幕尺寸减小到 991 像素以下时，我上面的内容不起作用。

Answer 1

这是因为您使用position:absolute 将.hero-text 脱离了正常的布局流程。

不完全确定您的文本最终应该是什么样子，但您有 2 个选择：

1. 将position: relative 添加到#hero 或.container。这将使绝对定位层相对于这些层定位。现在我假设它相对于body 定位，因为您在.hero-text 的任何父级上都没有position: relative

或

1. 不要将.hero-text 排除在布局流程之外，并尝试在不使用position: absolute 的情况下获得您想要的样式

Answer 2

我了解了在希望 .hero-text 调整大小或将其自身调整为屏幕大小时使用 ems（或 rems）的好处。这是我的意思的一个例子：

/* === MEDIA QUERIES === */

@media screen and (max-width: 991px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        font-size: 90%;
        margin-top: 130px;
        margin-left: 100px;
        position: relative;
        background: none;
    }
}
@media screen and (max-width: 728px) {
    .hero-text {
        font-size: 75%;
    }
}

@media screen and (max-width: 648px) {
    .logged-in .navbar-fixed-top {
        top: 42px;
    }
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        font-size: 75%;
        margin-top: 130px;
        margin-left: 100px;
        position: relative;
        background: none;
    }
}

@media screen and (max-width: 568px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        font-size: 50%;
        margin-top: 130px;
        background: none;
      }
}

通过选择 font-size: 90% 并对其他视口大小重复此操作并进行适当调整，我能够在更改视口大小时让文本自行调整大小。