Question

我正在尝试的是使此页面在640px和1280px之间响应。我的前两个媒体库运行正常，但问题是我的第三个。我已经尝试了几种选择，但没有任何结果。当我到达829px时，无论屏幕的宽度如何，页眉，导航，旁边和页脚都起作用，这是一个问题，但是无论如何，该部分都无法工作。

  @media (max-width: 1260px) {  
     #container {  
     display: grid;
     grid-template-areas: 
       "header header header"
       "nav section section"
       "nav aside aside"
       "footer footer footer";
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 5px;
      height: 100vh;
      margin: 10px;   
   }
    ul li {
    display: block-inline; 
   }
  }
  @media (max-width: 1223px) {
  #container {
  display: grid;
  grid-template-areas: 
  "header header header"
  "nav nav nav"
  "section section section"
  "aside aside aside"
  "footer footer footer";
   grid-template-rows: 1fr;
   grid-template-columns: 13% 1fr 18%;
   grid-gap: 5px;
   height: 100vh;
   margin: 10px;  
  }
 ul li {
  text-align: center; 
  }
 }

  @media (max-width: 829px) {
  #container #products {
   display: grid; 
  grid-template-areas:
   "header"
  "nav"
  "section"
  "section"
  "aside"
  "footer";

   }
 }

Answer 1

我看到您在第三@media上有一个不同的元素，让我向您展示：

@media (max-width: 1223px) {
  #container { ... }
 }

 @media (max-width: 829px) {
  #container #products { ... } // Do you want to change #container or #products??

我该如何使这件事响应

1 个答案: