웹 사이트의 요소를 항상 브라우저 크기에 맞추는 방법

Question

나는 내 웹 사이트에서 항상 브라우저 크기에 맞게 만들려고합니다. 바로 지금, 작은 화면으로 웹 사이트에 간다면 모든 것이 엉망입니다. 여기에 당신이 상대의 CSS의 코드를 유지해야

HTML

<div class="contactus"> 

<h2>Contact Us</h2> 

<h3>PhoneNumber</h3> 
<h3>812-123-4567</h3> 
<h3>Email</h3> 
<h3>qwerty@asd.com</h3> 
</div> 

CSS

div.contactus { 
    position:absolute; 
    right:20px; 
    top:150px; 
    border: 2px solid; 
    border-color:#333; 
    width:100px; 
    font:20px; 

Answer 1

이 반응하게하기 위해 내 코드에서 하나와 CSS를 예입니다 왜냐하면 유장을 고정 단위로 만들면 코드가 화면에 적용되지 않으므로 코드를 다음과 같이 만들어야합니다.

div.contactus { 
    position:absolute; 
    right:5%; 
    top:25%; 
    border: 2px solid; 
    border-color:#333; 
    width:100%; 
    font:20px;} 

비율이 좋지 않으면 좋아할 때까지 계속 재생하면됩니다.

Answer 2

반응 형 미디어 쿼리는 매우 유용하지만 가장 큰 문제는 컨테이너 (.contactus)가 사용자가 배치하려고하는 텍스트를 수용 할만큼 충분히 넓지 않다는 것입니다. contactus 너비를 400px로 변경하십시오. 그러나 작은 화면에서는 뷰포트 너비에 따라 글꼴 크기와 컨테이너 크기를 업데이트하는 미디어 쿼리가 있어야합니다. 모든

Answer 3

먼저 우리 사회에 오신 것을 환영합니다, 먼저 더 나은 질문에 대한 답변 도움이 더 정확한 응답을 얻을 수있는이 주제 읽기 : 귀하의 질문에 대해 https://stackoverflow.com/help/how-to-ask

을, 당신은 당신이 "함께 장난"로 무슨 뜻인지 잘 설명해야 . https://jsfiddle.net/nLxa1745/

HTML

<div class="main"> 
    <img class="user-pic" src="http://placehold.it/250x150"> 
    <div class="contact-box"> 
    <h4 class="user-name">Contact Us</h4> 
    <ul class="info-contact"> 
     <li> 
     phonenumber 
     </li> 
     <li> 
     812-123-4567 
     </li> 
      <li> 
     email 
     </li> 
     <li> 
     qwerty@blabla.com 
     </li> 
    </ul> 
    </div> 
</div> 

CSS

body { 
    font-family: sans-serif; 
    color: #3f3f3f; 
} 

li{ 
    margin: 5px 0px 0px 20px; 
} 

.main { 
    border: 2px solid gray; 
    width: 250px; 
    margin: auto; 
    box-shadow: 2px 2px 5px 1px gray; 
} 

.user-pic { 
    border-bottom: 2px solid gray; 
} 

.user-name { 
    margin-left: 15px; 
    margin-bottom: 0; 
    color: #B77425; 
} 

.info-contact { 
    list-style-type: none; 
    padding: 0; 
} 


@media only screen 
and (min-width : 600px) { 
    .main { 
    width: 100%; 
    height: 150px; 
    } 
    .user-pic { 
    border-right: 2px solid gray; 
    float: left; 
    } 
    .contact-box { 
    float: left; 
    } 
} 

추신 :

나는 당신의 반응 문제와 함께 당신을 도울 수있는 간단한 바이올린을 만든 나는 제목에 대한도 https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824