jquery - 为什么我的网站在移动设备上看起来像这样？

Question

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

问题 1

如何修复我的 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>

这是显示问题的我的网站的移动设备 View 的屏幕截图。

JSFIDDLE

Answer 1

您需要设置 Bootstrap media querys .

@media (min-width: 375px) and (max-width: 414px) {
 .cssClass1{
    margin-left:5px !important;
   }
 }

因此每个宽度在 375 到 414 像素之间的设备都将采用这些特殊的 CSS 类。可以在 Safari 的响应式设计部分中检查不同设备的宽度和高度。 320px 是 iPhone 5，375 是 iPhone 6 等等。

查看您的 JSFiddle当设备小于 375px 时，我将 font size 更改为 0.5em。请注意，我使用了 !important 关键字，因为有时当您不使用该关键字时，它的类将不适用。自己试试看。如果不发表评论，那应该可以解决问题:)