재단의 미디어 쿼리 작업에 대한 논리를 이해하지 못합니다.

Question

재단에 대한 과거 경험이 있습니다. 그래서 나는 반응 형 사이트 생성을위한 기초 미디어 쿼리 규칙을 사용하기 시작했습니다.

// Small screens 
@media only screen { } /* Define mobile styles */ 

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ 

// Medium screens 
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */ 

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 

// Large screens 
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */ 

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ 

// XLarge screens 
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */ 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ 

// XXLarge screens 
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */ 

여기 내 문제 : 나는 데스크톱 버전에 표시됩니다 휴대폰의 메뉴 바 숨기기 위해 노력하고 있습니다 (같은 어떻게 쇼를 위해 작은 기초에서). 그래서 미디어 쿼리 @media only screen 및 (max-width : 40em) 내에서 모바일 용 스타일을 정의했습니다. 놀랍게도 그것은 효과가 없습니다. 그래서 위에서 언급 한 규칙, @media only screen {}을하기 전에 다음 규칙을 추가했습니다.

또한 @media 전용 화면과 (최소 너비 : 5 em) 및 (최대 너비 : 40em) 조합을 시도했습니다. 그것은 또한 작동하지 않았다.

또한 내 페이지에 뷰포트 메타 태그가 정의되어 있습니다. 아무도 왜 이런 일이 일어나는 이유를 설명 할 수 있습니까 ???

Answer 1

내가 생각 어쩌면 (하나 개의 명령이 더 높은 우선 순위를 가지고) CSS 특이성에 관한 문제 그래서 @media 화면 만 넣어 노력에 대해 : 당신의 명령도 와의 마지막에 (최대 폭 40em) 를 브라우저에서이 명령이 다른 명령으로 겹쳐서 쓰여지는지 알기 위해 브라우저에서 요소 검사하기 부트 스트랩으로 작업 할 때 가장 큰 일이 발생하면이 도움이 필요합니다.

Answer 2

요소에 hide-for-small 클래스를 부여해야합니다. 모바일 화면에 표시되지 않습니다. Know as visibility classes