为什么我的文字在移动设备视图中没有响应？

Question

我目前使用的是MacBook，显示屏尺寸为15.4英寸（2880 x 1800），这是我的网站每个部分如何查找我的主页的屏幕截图。

#app（第1部分）

#section2（第2部分）

#section3（第3部分）

----------

问题一

如何修复我的h3文字，以确保其在移动设备上的响应能力，并且适合在移动设备上观看。下面是一个截图，它看起来如何，你可以看到它没有正确调整和适应屏幕。如果您查看帖子底部的我的网站的JSFIDDLE链接，您可以看到我已使用<div class="col-lg-12">来确保它的响应性，因此不知道为什么它会在移动设备上显示。

<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
   <span>I'm a</span>
   <span class="cd-words-wrapper">
   <b class="is-visible">Front-End Web Developer</b>
   <b>Graphic Designer</b>
   </span>
</h3>

以下是我网站的移动设备视图的屏幕截图，显示了该问题。

JSFIDDLE

Answer 1

white-space: nowrap会阻止文字在小屏幕上包装。从.cd-words-wrapper b：

中删除

 .cd-words-wrapper b {
      display: inline-block;
      position: absolute;
      width: 100%;
      text-align: center;
      left: 0;
      top: 0;
  }

https://jsfiddle.net/wdafatrx/8/

您还可以使用vw and vmin units将其保留在屏幕内。

Answer 2

.cd-words-wrapper b设置了white-space:nowrap - 这会导致其中的所有文字都停留在一行上。删除这是修复您的响应问题。

Answer 3

在你的CSS中使用媒体通话;

    @media screen(max-width: 480px) {
       <!--your div class name--> h3 : <!--new font size--> }