如何防止身體脫離屏幕？

我正在爲自己製作一個簡單的網站。當我在瀏覽器中打開網站並減少瀏覽器橫向寬度時，主體/白色矩形將從屏幕上消失。我如何防止這種情況發生？如何防止身體脫離屏幕？

而且，隨意點在我的代碼的任何缺陷/問題。我是網絡開發新手，需要儘可能多的批評。

html { 
 
    background-image: url("bg.jpg"); 
 
    padding: 150px; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 
h1 { 
 
    line-height: 15px; 
 
    text-align: center; 
 
    font-weight: 600; 
 
    color: rgba(61, 61, 61, 0.7); 
 
} 
 
h3 { 
 
    line-height: 0px; 
 
    text-align: center; 
 
    font-weight: 100; 
 
    color: rgba(61, 61, 61, 0.7); 
 
} 
 
hr { 
 
    border: 0; 
 
    color: red; 
 
    border-bottom: 1px solid rgba(168, 168, 168, 0.92); 
 
    width: 320px; 
 
} 
 
p { 
 
    text-align: center; 
 
} 
 
body { 
 
    padding: 25px; 
 
    max-width: 400px; 
 
    min-width: 400px; 
 
    height: 200px; 
 
    font-family: "Courier New", Courier, monospace; 
 
    background: #fafafa; 
 
    margin: auto; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 0px 90px rgba(58, 58, 58, 0.71); 
 
    opacity: 0.95; 
 
    position: static; 
 
} 
 
footer { 
 
    margin-top: 45px; 
 
    opacity: 0.5; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf 8" /> 
 
    <title>JOSH BAKOS</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <h1>JOSH BAKOS</h1> 
 
    <h3>STUDENT</h3> 
 
    </header> 
 

 
    <hr> 
 

 
    <p>I am a Java developer and a future Software Engineering Student @ UOIT.</p> 
 

 
    <p> 
 
    <br><a href="https://twitter.com/jzbakos" target="_blank">Twitter</a> &bull; <a href="http://stackoverflow.com/users/6383960/jzbakos" target="_blank">StackOverflow</a> &bull; <a href="https://github.com/jzbakos" target="_blank">Github</a> 
 
    </p> 
 

 
    <footer> 
 
    <p>&copy; Josh Bakos</p> 
 
    </footer> 
 

 
</body> 
 

 
</html>

來源

2016-11-04 jxshu

無需在特定示例中將媒體查詢的內容複雜化。這裏的解決方案非常簡單。

首先，將padding: 150px;改爲padding-top: 150px;,html。當您使用padding而不是padding-top時，此屬性將在您的身體周圍創建空間，當窗口太小時它會將其推出屏幕。

最後，刪除min-width: 400px;財產從身體或使其小於max-width。 min-width: 400px;是防止您的身體適應窗口大小的屬性。

我對此的個人建議：對於您的網頁，媒體查詢可能仍然有用。如果你想你的身體元素和窗口的頂部角落之間的垂直空間較小的分辨率會有所減少，你可以在你的樣式表的末尾添加這樣的事情：

@media (max-width: 767px) { 
    html { 
    padding-top: 20px; 
    } 
}

調整這兩個值取決於您的偏好。您還可以在@media中使用min-width或width，並根據需要添加儘可能多的媒體查詢。

來源

2016-11-04 02:12:31

非常感謝。快速提問：對於卡片/白色矩形，我應該將所有這些放在一個div中，還是隻放在body中？ – jxshu

挺好，年輕人 – fxm

看看媒體查詢：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

來源

2016-11-04 01:49:02

嘗試使用media queries使身體反應，你可以使用媒體查詢generator

來源

2016-11-04 01:52:35

嘗試在這裏做這個檢查https://jsfiddle.net/

body { 
    padding:25px; 
    max-width: 400px; 
    width:100%; 
    font-family: "Courier New", Courier, monospace; 
    background: #fafafa; 
    margin: auto; 
    border-radius: 3px; 
    box-shadow: 0px 0px 90px rgba(58, 58, 58, 0.71); 
    opacity: 0.95; 
    position: static; 
}

來源

2016-11-04 01:55:45

如何防止身體脫離屏幕？

回答

相關問題