爲什麼我的網站在移動設備上看起來像這樣？

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

爲什麼我的網站在移動設備上看起來像這樣？

回答

相關問題