當屏幕較小的div沒有拉伸

-1

當我去一個小屏幕上我的網站，頁眉頁腳&不是寬度100％。有人能解釋我發生了什麼事嗎？當屏幕較小的div沒有拉伸

我的意思是，身體被切斷......

2015-10-14 Jelle Siderius

給定鏈路不是** **反應可能這就是爲什麼，一個快速的解決方案，您可以設置'最小寬度：1200像素;'你'body' – vivekkupadhyay

問題尋求幫助的代碼必須包括必要的，以最短的代碼在問題本身**中重現它**。儘管您已經提供了一個示例鏈接，但如果鏈接無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –

我假設你正試圖讓你的網站響應？您的.container類具有適用的固定寬度。設置max-width將使其以較小的分辨率進行換行。

.container { 
    margin: 0 auto; 
    width: 1170px; 
    max-width: 100%; 
}

我會建議與媒體查詢工作，如提及here，這樣就可以在寬度在您的設計打破應用樣式。

媒體查詢會讓你樣式應用於特定的寬度。樣式將級聯一路下跌，直到最小/最大分辨率，相對於設備（視）寬度等於假，由最小/最大分辨率設置的條件不再滿足。

一個例子是以下

/* Mobile first CSS would come before 
    the media queries below */ 

@media only screen and (min-width: 480px) { 
    .services .service { 
     width: 100%; 
     margin-bottom: 25px; 
    } 
    .services .service + .service { 
     margin-left: 0; 
    } 
} 
@media only screen and (min-width: 720px) { 
    .services .service { 
     width: 50%; 
    } 
} 
@media only screen and (min-width: 1170px) { 
    .services .service { 
     width: 23%; 
     margin-bottom: 0; 
    } 
    .services .service + .service { 
     margin-left: 2.66%; 
    } 
}

不過，我強烈建議你看看所有詳細解釋的鏈接，這樣你就可以設置正確的斷點和樣式自己。

來源

2015-10-14 11:29:57 Jason

您的網站不適合移動設備，但你的問題的答案：

.container { 
    margin: 0 auto; 
    width: 1170px; 
    //Add max-width 
    max-width: 100%; 
}

來源

2015-10-14 11:24:02 Alex

因爲它沒有反應，然後添加'最大寬度：100％;'將摺疊整個網站及其真的很痛苦，任何人瀏覽它，而不是，給予水平滾動仍然是有用的。 – vivekkupadhyay

@vivekkupadhyay沒錯。我只是回答這個問題，並想給他一些想法。 – Alex

我認爲你要把它響應你可以用引導框架去它會很容易使它響應，或只是把CSS類做出來。

.container { 
    margin: 0 auto; 
    width: 1170px; 
    max-width: 100%; 
}

並且頁眉和頁腳使寬度：auto;如果可能的話，它應該適合窗口大小。

來源

2015-10-14 11:55:09

當屏幕較小的div沒有拉伸

回答

相關問題