手機上的身體溢出屏幕寬度只有

-3

我想創建一個適應不同屏幕尺寸的流體佈局... 它在桌面上沒有問題，但在平板電腦或手機上的身體溢出，並創建一個水平滾動條。 Click here you can see the problem 手機上的身體溢出屏幕寬度只有

我已經檢查了所有的元素及其版面和邊距，並沒有發現問題。

2015-06-26 10e

既然你不顯示任何編碼的，我的第一個猜測將是一個固定寬度元件。 – BigScar

這是導致問題的'.infolinksbottom'塊。 – diggersworld

謝謝你指點我正確的方向......這是社交媒體鏈接的其中一列... – 10e

問題是爲類**.bottomlong**設置css屬性的方式。您將需要更精確地管理min-width。目前min-width設置爲120px，所以這是它給水平滾動條的主要原因之一。要麼你得到的最小寬度小於120px，要麼把float:left;作爲.bottomlong。

我注意到你沒有使用BREAKPOINTS。最好的做法是使用斷點來實現您在不同設備上的結果。

下面是幾個最常用的斷點

@media screen and (max-width:959px){ 
    /*your css classes*/ 
} 
@media screen and (max-width:640px){ 
    /*your css classes*/ 
} 
@media screen and (max-width:320px){ 
    /*your css classes*/ 
}

的你可能會喜歡參考GOOGLE DOCS FOR BREAKPOINTS更詳細的信息。

來源

2015-06-26 12:11:58

謝謝！這麼多... – 10e

希望你工作得很好。我強烈建議使用BREAK-POINTS，而不是通過100％高度的技巧來管理響應能力。 :) –

用於這個CSS爲桌面滾動刪除

footer.css線沒有55

.infolinksbottom{ 
margin-left:5%; // remove this line 
margin-left:0; //add this line 
padding-left:5%; // add this line 
box-sizing: border-box; // add this line 
}

來源

2015-06-26 12:12:02

爲什麼邊框？ – 10e

這是css3屬性，我使用填充。更多信息搜索谷歌如何使用css3屬性框大小基本上這是與盒模型Css。 –

我在這個頁面也有類似的問題：http://www.10elearning.com/en/projects/philosophy.php我修復了footer.css，但是我找不到在這個頁面上導致它的原因。所有其他頁面與該頁腳行爲預期沒有溢出..我只是瘋了... – 10e

手機上的身體溢出屏幕寬度只有

回答

相關問題