媒體查詢無法在響應式網頁設計中使用網格

用於頁面上的CSS以不同的視口大小顯示網格元素根據視口大小顯示網格及其後代的代碼。如果屏幕的大小變小，那麼根據屏幕的大小，列應該放下，併爲每個容器以移動模式獲取單行。如果是平板模式，主要和側邊欄應該從第二排降到第三排。在頁面上使用的提前，以顯示不同的視口大小格子元素媒體查詢無法在響應式網頁設計中使用網格

<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

到目前爲止，您嘗試過哪些方法無效？ –