다른 화면 크기로 웹 사이트가 다르게 표시됩니다.

저는 웹 디자인을 처음 접했습니다. 나는 학교에서 학생들을위한 웹 사이트를 만들고있다. 그러나 내 Mac에서 콘텐츠가 가운데에 표시됩니다. 그러나 창문에서는 내용이 왼쪽보다 오른쪽에 더 많은 공간을 가지고 있습니다.
다른 화면 크기로 웹 사이트가 다르게 표시됩니다.

.inner 
 
{ 
 
text-align: center; 
 
display: inline-block; 
 
position: absolute; 
 
top: 30%; 
 
left: 25%; 
 
margin: 0 auto; 
 
}

<div class="inner"> 
 
    <h1>What are you looking for?</h1> 
 
    <br> 
 
    <button class="button button4"><font size="6">Developer</font></button> 
 
    <button class="button button4"><font size="6">Entrepreneur<font size="6"></button> 
 
    <button class="button button4"><font size="6">Other<font size="6"></button> 
 
    </div>

출처

2017-09-30 Kevin Tsou

확인이 코드가 도움이 될 수 있습니다 당신

<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <style type="text/css"> 
 
     .inner-div 
 
     { 
 
      text-align: center; 
 
      margin: 0 auto; 
 
      background-color: #fafafa; 
 
      border: 1px solid #ccc; 
 
      width: 40%; 
 
      min-height: 200px; 
 
     } 
 
     .button 
 
     { 
 
      background-color: #f2f2f2; 
 
      border: 1px solid #ccc; 
 
      padding: 10px 20px; 
 
      text-align: center; 
 
      font-size: 14px; 
 
     } 
 
     .button:hover 
 
     { 
 
      background-color: #f9f9f9; 
 
      border: 1px solid #aaa; 
 
      padding: 10px 20px; 
 
      text-align: center; 
 
      font-size: 14px; 
 
      cursor:pointer; 
 
     } 
 
     @media screen and (max-width: 1024px) 
 
     { 
 
      .inner-div 
 
      { 
 
       width: 60%; 
 
      } 
 
     
 
     
 
     } 
 
     @media screen and (max-width: 678px) 
 
     { 
 
      .inner-div 
 
      { 
 
       width: 90%; 
 
      } 
 
      .button 
 
      { 
 
       width: 100%; 
 
      } 
 
     
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="inner-div"> 
 
     <h1> 
 
      What are you looking for?</h1> 
 
     <br> 
 
     <button class="button"> 
 
      Developer 
 
     </button> 
 
     <button class="button"> 
 
      Entrepreneur 
 
     </button> 
 
     <button class="button"> 
 
      Other 
 
     </button> 
 
    </div> 
 
</body> 
 
</html>

출처

2017-09-30 04:40:50

다른 화면 크기로 웹 사이트가 다르게 표시됩니다.

답변

관련 문제