는 CSS 반응 네비게이션 바 내가 난 단지 내 코드에서 중앙에 로고가 코드를</p> <pre><code><nav class="blue"> <a href="#!" class="brand-logo center">Logo</a> </nav> </code></pre> <p>다음 한

Question

모바일

작동하지 실현. 그러나 모바일 장치에서이 코드를 볼 때 navbar의 높이는 매우 낮습니다. 이 경우 응답 형 클래스가 작동하지 않는 이유는 무엇입니까?

나는 navbar 요소를 sidenav로 축소하는 것에 관심이 없다는 점에 유의하십시오. 지금은 네비게이션 자체가 휴대 기기에서 매우 작아 보이기 때문에 응답 성이 떨어지는 부분이 있다고 생각합니다.

예를 들어이 문제는 첨부 할 사람이 codepen입니다. 가로 크기를 조정하여 해상도를 다르게하여 렌더링 해보면 작은 장치에서 네비게이션의 높이가 더 짧아집니다.

편집 1 : 아래 스크린 샷을 보면 navbar가 응답하지 않지만 페이지의 전체 콘텐츠가 응답하지 않는 것뿐입니다.

Answer 1

문제점이 무엇인지 알아 냈습니다. 내 페이지에 meta viewport 태그가 없습니다.

은 기본적으로 그냥이 작동하게 추가 :

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

이 기존 미디어 쿼리를 허용 예상대로 제대로 작동하려면 (materializecss 자체에서 제공 것들).

Answer 2

@media only screen and (min-width: 601px) 
materialize.css:4477 
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { 
    height: 64px; 
} 

이 은 materialize.css 파일 내부의 규칙입니다. 601px 이상의 너비에 적용됩니다.

nav { 
    height: 56px; 
} 

600px 이하의 경우 기본값입니다. 어쩌면 시도해도 되겠습니까

nav { 
    height: 64px; 
}