격자가있는 반응 형 웹 디자인에서 미디어 쿼리가 작동하지 않습니다.

페이지가 서로 다른 뷰포트 크기의 격자 요소를 표시하는 데 사용되는 CSS 뷰포트의 크기를 기반으로 격자 및 그 자손을 표시하는 코드입니다. 화면 크기가 화면의 크기에 비례하여 작아지면 각 컨테이너에 대해 열이 제거되고 모바일 모드에서 단일 행을 가져와야합니다. 타블렛 모드의 경우 메인과 사이드 바가 2 행에서 3 행으로 떨어집니다. 사전에 그리드격자가있는 반응 형 웹 디자인에서 미디어 쿼리가 작동하지 않습니다.

<html> 
    <head> 
     <meta name="viewport" content="width=device-width,initial-scale=1"> 
     <title> 
      Modern Web Layout 
     </title> 
     <link rel="stylesheet" href="css/main.css" type="text/css"> 
    </head> 
    <body> 
     <main class="gridContainer"> 
     <header class="gridHeader grid-item"> 
      HEADER 
     </header> 
      <section class="gridNav grid-item"> 
       NAVIGATION AREA 
      </section> 
      <section class="gridMain grid-item"> 
       MAIN CONTENT 
      </section> 
      <section class="gridSide grid-item"> 
       SIDEBAR 
      </section> 
      <footer class="gridFooter grid-item"> 
       FOOTER 
      </footer> 
     </main> 
    </body> 
</html>

이 도와주세요 다른 뷰포트 크기의 요소 ..... 감사를 표시하는 페이지에 사용

body{ 
    margin: 0; 
    padding: 0; 
} 

.gridContainer{ 
    display: grid; 
    height: 100%; 

    grid-template-columns: 20% 1em 1fr 1em 20% ; 
     grid-template-rows: 4.4em 1em 1fr 1em 4.4em; 
    grid-template-areas: "header header header header header" 
     ". . . . ." 
     "navigation . mainContent . sidebar" 
     ". . . . ." 
     "footer footer footer footer footer"; 
} 
.gridHeader{ 
    grid-area: header; 
    background-color: #A62E5C; 
} 

.gridFooter{ 
    grid-area: footer; 
    background-color: #A62E5C; 
} 

.gridNav{ 
    grid-area: navigation; 
    background-color: #9BC850; 
} 

.gridMain{ 
    grid-area: mainContent; 
    background-color: #9BC850; 
} 

.gridSide{ 
    grid-area: sidebar; 
    background-color: #9BC850; 
} 

.grid-item { 
    color: #fff; 
    box-sizing: border-box; 
    font-size: 1em; 
    padding: 1em; 
    overflow: hidden; 
    text-align: center; 
} 

@media screen and (max-width: 768px) { 

    .grid-container { 
     grid: 1fr 1em 30%/4.4em 1em 3.6em 1em 1fr 1em 4.4em; 
     grid-template-areas: 
     "header header header" 
     ". . ." 
     "navigation navigation navigation" 
     ". . ." 
     "content . sidebar" 
     ". . ." 
     "footer footer footer"; 
    } 

} 

@media screen and (max-width: 480px){ 
    .gridContainer{ 
     grid: 1fr/3.6em 1em 4.6em 1em 1fr 1em 4.6em 1em 3.6em; 
     grid-template-areas: "header" 
      "." 
      "navigation" 
      "." 
      "mainContent" 
      "." 
      "sidebar" 
      "." 
      "footer"; 
    }  
}

HTML은

Codepen

출처

2017-10-09 ManishChahal

지금까지 작동하지 않는 것은 무엇입니까? –