너비 : 100 %가 반응 형 디자인에서 작동하지 않는 이유는 무엇입니까?

Question

내 포트폴리오를 만들면서 응답이 잘못된 디자인을 해결할 수없는 오류가 발생했습니다. 크롬 개발자 도구를 사용하면 화면 너비가 1200px보다 작거나 같으면 너비가 1000 %로 떨어집니다.

이미지를 보면 빨간색 테두리가 미디어 쿼리가 실제로 작동하는지 확인하기 위해, 내 코드를 쉽게 제거했지만 아래는 상대적인 것이라고 생각합니다.

헤더 이미지

우리는 그 폭이 삼진 것을 볼 수 있고, 난 여전히 수직 스크롤이있다.

HTML 코드 :

<header> 
    <nav> 
     <div class="row"> 
      <img class="logo" src="../img/logo.svg" alt="asheem logo"> 
      <ul class="main-nav"> 
       <li><a href="#">Current Projects</a></li> 
       <li><a href="#">Previous Projects</a></li> 
       <li><a href="#">Contact me!</a></li> 
      </ul> 
     </div> 
    </nav> 
    <div class="hero-text-box"> 
     <h1>Asheem Chhetri</h1> 
     <a class="btn btn-full" href="#">Projects</a> 
     <a class="btn btn-ghost" href="#">Show me more</a> 
    </div> 
</header> 

CSS 코드 :

*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
html{ 
    background-color: #fff; 
    color: #6d6d6d; 
    font-family: 'Exo', sans-serif; 
    font-size: 20px; 
    font-weight: 300; 
    text-rendering: optimizeLegibility; 
} 
.clearfix{ 
    zoom: 1; 
} 
.clearfix:after{ 
    content: '.'; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
/*------------------------------------------------ 
Reusable components 
------------------------------------------------*/ 
.row{ 
    max-width: 1140px; 
    margin: 0 auto; 
} 
.box{ 
    padding: 1%; 

} 
section{ 
    padding: 80px 0; 
/* height: 100vh;This solved the page flow problem for now. */ 
} 
/*------------------------------------------------ 
Header 
------------------------------------------------*/ 
header{ 
    background-image: url(../img/imageForMain2.jpg); 
    background-size: cover; 
    background-position: center; 
    position: relative; 
    background-attachment: fixed; 
    height: 100vh; 
} 
h1, h2, h3, h4{ 
/* text-align: center;*/ 
    font-weight: 300; 
    text-transform: uppercase; 
    letter-spacing: 2px; 

} 
h1{ 
    margin-top: 0; 
    margin-bottom: 20px; 
    color: white; 
    font-size: 200%; 
    word-spacing: 4px; 
} 
.hero-text-box{ 
    position: absolute; 
    width: 1140px; 
    top: 20%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -20%); 
    transform: translate(-50%, -20%); 
} 

미디어 쿼리 코드 :

/*------------------------------------------ 
Big tablets to 1200px(width smaller than 1140px) 
-------------------------------------------*/ 
@media only screen and (max-width: 1200px){ 
    .hero-text-box{ 
     width: auto; 
     padding: 0 2%; 
     border: 1px solid red; 
    } 
    .row{ 
     padding: 0 2%; 
    } 
} 

PS : 나는 생을 내 머리 태그에 이미 :

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

그래서 분명히 이해할 수 없는데, 왜 수직 스크롤을 얻게 되나요? 오버플로는 화면 크기가 약 1200px 일 때 발생합니까? 도움 주셔서 감사합니다!

Answer 1

너비가 반응하지 않는 주된 이유는 픽셀 (픽셀)을 사용하고 있기 때문에 픽셀이 매우 유용 할 수 있기 때문입니다. 픽셀 대신 너비의 백분율을 사용하십시오. 당신의 문제를 해결하십시오.

미디어 쿼리의 경우 퍼센테이지도 사용하십시오. 은 태블릿의 경우 최소 너비()를, iphone, nexus의 경우 각각 다른 미디어 쿼리를 설정합니다. 그 이유는 때로는 비율이 모든 이슈를 해결하지 못하기 때문입니다. 길을 따라 약간의 레이아웃 버그가 발생할 수도 있지만, 간단 할 때 그 문제를 해결할 수 있습니다.

화면 크기가 작 으면 픽셀을 사용하십시오. . 비율이 아닙니다. 그러나 그것을 어떻게 사용 하느냐에 달려 있습니다.
전체적으로 주요 문제를 해결합니다. 백분율을 사용하십시오. 도움이되기를 바랍니다.
건배