ボディが画面から外れるのを防ぐにはどうすればいいですか？

私は自分のために簡単なウェブサイトを作っています。ブラウザでウェブサイトを開いてブラウザの横幅を小さくすると、本文/白い矩形が画面から消えます。これを防ぐ方法を教えてください。問題のボディが画面から外れるのを防ぐにはどうすればいいですか？

また、私のコード内の任意の欠陥/問題を指して自由に感じます。私はウェブ開発には新しく、私が得るほどの批判を必要としています。

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-topの代わりにpaddingを使用すると、このプロパティは、ウィンドウが小さすぎると画面から外に出るように本体の周りにスペースを作成します。

最後に、本体から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に配置するか、すべてをそのまま本体に残す必要がありますか？ – 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

ボディが画面から外れるのを防ぐにはどうすればいいですか？

答えて

関連する問題