使用瀏覽器調整頁面大小

-2

我正在爲The Odin Project執行第一個項目，該項目正在重新創建Google主頁。我認爲我看起來相當不錯，考慮到我只待了幾個星期，但是當我將我的頁面從全屏模式中移出時，會出現一個滾動條。如果您查看Google首頁，則頁面本身將調整大小，而不是使用滾動條。 Overflow:hidden顯然只會切斷頁面的底部，所以我不想那樣。如果我沒有足夠具體，我很抱歉，但這是我的Github的link來檢查它。使用瀏覽器調整頁面大小

如果你看到我做的事情完全錯誤或混亂，我真的很喜歡一些批評。

來源

2017-04-06 kevin oneill

歡迎來到Stack Overflow！尋求代碼幫助的問題必須包括在問題本身**中重現它所需的最短代碼**，最好在** Stack Snippet **中。雖然您提供了一個鏈接，但如果它變得無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。請參閱[**我網站上的某些內容不起作用，我可以只粘貼一個鏈接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯規，工作可以-I-剛剛糊一個鏈接到它）。 –

我還沒有看過你的GitHub，但我會建議合併bootstrap，它基本上可以讓你開發響應屏幕尺寸的頁面。

您可能會發現本教程有幫助： https://www.w3schools.com/bootstrap/

來源

2017-04-06 15:52:52 Maja

通過你的Github上快速瀏覽後，要設置一個min-width: 500px您all類contans所有的內容。請改爲設置all類width: 100%。這將允許您的內容填充頁面並根據屏幕大小進行調整。

當然，一旦你真的小和內容擊中了每個-另一方面，他們將打破其他線路，但你必須處理與媒體的查詢，來調整/縮放等等

.all { 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
}

來源

2017-04-06 15:59:43

其實，我所要做的就是刪除所有.all樣式來解決此問題。我還修復了頁腳，以便它粘在頁面的底部。最後，如果你想輸入的內容好，使用media queries像這樣：

@media (max-width: 500px /* or whatever */) { 
    input { 
     width: 80%; 
    } 
}

這將在屏幕上輸入的寬度設置爲80％大小500px小。 Hre是我改變的一支筆：https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100

來源

2017-04-06 16:07:31

使用瀏覽器調整頁面大小

回答

相關問題