미디어 쿼리 브라우저에서 작업 중 작동하지 않음

Question

내 문제는 봤지만 적합한 해결책을 찾지 못했습니다. 효과적으로 HTML과 CSS를 사용하는 eBay 목록 템플릿을 만들고 있습니다. SCSS를 사용하여 스타일 시트를 생성하고 있습니다. 나는 분에 내 템플릿의 메뉴 측면에서 일하고 있습니다.

너비가 690px 미만인 장치에서 (표준 쿼리를 사용하지 않고 내 콘텐츠에 맞게 중단 점을 사용하고 있으며 변경 될 수 있음) 메뉴 단추가 다음과 같이 변경되도록 미디어 쿼리를 설정했습니다. 행에 반대되는 열 (데스크탑)의 블록 요소 및 표시.

먼저 atm에서 작업중인 미디어 쿼리가 있습니다. 이라는 SCSS 부분 파일의 믹스인데 style.scss으로 가져옵니다. 내가 가진

section { 
     width: 85vw; 
     margin: 0 auto; 
     .header & { 
     @include bp-large { 
      width: 60vw; 
     } 
     } 
    } 

    .logo { 
     @include bp-large { 
     text-align: center; 
     } 
    } 

    .top-menu { 
     background-color: $primary; 
     text-align: center; 
     width: 100%; 
    } 

    .top-menu ul { 
     list-style: none; 
     display: flex; 
     text-align: center; 
     flex-direction: row; 
     @include bp-large { 
     flex-direction: column; 
    } 
    } 

    .top-menu ul li { 
     flex-grow: 1; 
     display: flex; 
     align-items: center; 
     background-color: $button-color; 
     padding: 15px; 
     border-right: 3px solid $accent-color; 
     &:last-child { 
     border: none; 
     } 
     &:hover { 
     background-color: $button-hover; 
     cursor: pointer; 
     } 
     @include bp-large { 
     display: block; 
     border-bottom: 3px solid $accent-color; 
     border-right: none; 
     &:last-child { 
      border: none; 
     } 
     } 
    } 

: 여기

  <div class='header'> 
      <section> 
       <div class='logo'> 
       <h2>Company Logo</h2> 
       </div> 
       <div class='top-menu'> 
       <ul> 
        <li><a href='#'>Store Front</a></li> 
        <li><a href='#'>Latest Arrivals</a></li> 
        <li><a href='#'>Featured Picks</a></li> 
        <li><a href='#'>Feedback</a></li> 
        <li><a href='#'>Contact</a></li> 
       </ul> 
       </div> 
      </section> 
      </div> 

는 관련 SCSS입니다 :

@mixin bp-large { 
     @media only screen and (max-width: 690px){ 
     @content; 
     } 
    } 

이

여기

@import 'media'; 내 메뉴의 HTML이다 사용하여 내 style.scss 파일로 가져 내 프로젝트 용으로 설정된 GitHub 페이지 @http://dannyxcii.github.io/lst-tmp - cu - 메뉴가 페이지의 왼쪽에 있으며 장치 폭을 피팅하지

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

하지만 : rrently 메뉴 실제로 (다음 HTML의 라인을 추가 한 후)가 스마트 폰에서 볼 때 어떻게해야 무엇을 하는가 처음에는 - 일반적인 '센터로 두 번 탭'하는 방식으로 어떻게되어 있는지보고 있습니다. 이 문제를 어떻게 해결할 수 있을지에 대한 아이디어가 있습니까?

Answer 1

브라우저에서 사용하는 것은 하드웨어 픽셀과 다른 픽셀입니다. 그들은 DIP (Density Independent Pixels 또는 Device Independent Pixels)을 사용합니다. 새로운 모바일 장치에는 화면 풀 HD 또는 더 많은 픽셀의 화면 해상도가 제공됩니다. 예제 삼성 Galaxy s8의 해상도는 2,960x1,440입니다. 14440 픽셀의 너비가 있으므로 (최대 너비 : 760 픽셀) 또는 다른 미디어 쿼리와 같은 미디어 쿼리는 최대 너비가 1440 픽셀이므로 작동하지 않습니다. 그러나 일관성을 유지하기 위해 DIP가 있습니다. DIP는 CSS 픽셀을 웹 사이트를 보는 데 최적 인 것으로 변환합니다. 휴대 전화의 경우 DIP의 너비는 320px입니다. TL : DR : 'meta viewport'태그를 추가 한 후 CSS 픽셀 대신에 dips를 사용하도록 브라우저에 알려줍니다. 고해상도 기기에 2 개 이상의 픽셀을 1DIP로 매핑하여 모든 모바일을 320px 기기로 취급합니다. 매우 짧고 달콤한 코스가 Udacity에서 무료로 제공되며 메타 뷰포트 태그 Link to the course을 통해 진행됩니다. 이 도움이 되길 바래요 :)