본문이 화면에서 벗어나는 것을 방지하려면 어떻게해야합니까?

나는 나 자신을 위해 간단한 웹 사이트를 만들고있다. 브라우저에서 웹 사이트를 열고 브라우저의 가로 폭을 줄이면 body/white 사각형이 화면에서 사라집니다. 어떻게 이런 일이 일어나지 않도록합니까? 문제의본문이 화면에서 벗어나는 것을 방지하려면 어떻게해야합니까?

스크린 샷 :

http://imgur.com/a/V5EtZ는 또한, 내 코드에 어떤 결함/문제를 지적 주시기 바랍니다. 나는 웹 개발에 익숙하지 않고 내가 얻을 수있는만큼 많은 비판을 필요로한다.

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

본문이 화면에서 벗어나는 것을 방지하려면 어떻게해야합니까?

답변

관련 문제