2017-07-11 82 views
2

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

這是我的網站的移動設備視圖的屏幕截圖,顯示該問題。

enter image description here

JSFIDDLE

+0

你在小提琴中的標記也有一些問題,以及..你缺少一個開放'

+0

有.cd -word-wrapper b {white-space:nowrap;}'使標題不會在小設備上破壞 –

+1

你有很多覆蓋「打破」了默認引導行爲。 – happymacarts

回答

3

您需要設置引導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關鍵字,因爲有時在不使用關鍵字時它的類不適用。自己嘗試一下。這應該做的竅門,如果不留下評論:)

+0

感謝您的幫助!我正在嘗試做iPhone 6s +和iPhone 7.作爲這樣做的結果,我用他們的設備'px'值替換了'px'值? –

+0

不,您可以製作多個Media Querys。就像在這個下面一樣,你可以使用@media(min-width:414px)和(max-width:600px){...'並且定義額外的Css樣式來設置這個寬度。你可以做數以百計的媒體查詢,但當然不推薦。保持簡單 – hansTheFranz

+0

@JonBridge做到了嗎? – hansTheFranz

相關問題