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

我目前在显示器尺寸为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>

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

JSFIDDLE

来源

2017-07-11 Jon Bridge

你在小提琴中的标记也有一些问题，以及..你缺少一个开放'

有.cd -word-wrapper b {white-space：nowrap;}'使标题不会在小设备上破坏 –

你有很多覆盖“打破”了默认引导行为。 – happymacarts

您需要设置引导media querys。

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

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

查看您的JSFiddle我将设备小于375px的font size更改为0.5em。请注意，我使用了!important关键字，因为有时在不使用关键字时它的类不适用。自己尝试一下。这应该做的窍门，如果不留下评论:)

来源

2017-07-11 16:10:42 hansTheFranz

感谢您的帮助！我正在尝试做iPhone 6s +和iPhone 7.作为这样做的结果，我用他们的设备'px'值替换了'px'值？ –

不，您可以制作多个Media Querys。就像在这个下面一样，你可以使用@media（min-width：414px）和（max-width：600px）{...'并且定义额外的Css样式来设置这个宽度。你可以做数以百计的媒体查询，但当然不推荐。保持简单 – hansTheFranz

@JonBridge做到了吗？ – hansTheFranz

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

回答

相关问题