为什么CSS网格模板区域不尊重我的媒体查询？

时间：2018-07-28 18:13:57

标签： html css css-grid

这是代码。我认为这是一个愚蠢的错误，但我看不到它-grr。我已经尝试了很多次。

我的代码中的媒体查询网格模板区域为

". title title ."
". img-1-title img-2-title ."
". img-1 img-2 ."
". img-3-title img-4-title ."
". img-3 img-4 ."

但是它在我的浏览器中显示了该模板

"img-1 title title img-2"
"img-3 img-1-title img-2-title img-4"
". img-3-title img-4-title ."

html 

<section>
  <div class="grid">
    <div class="title">Here is a couple of side projects</div>
    <div class="img-1-title">A chat app build with socket.io and node.js</div>
    <div class="arrow-1"><i class="fas fa-arrow-down"></i></div>
    <div class="img-1"></div>
    <div class="img-2-title">A responsive mock template of a company build with html css and flexboxgrid</div>
    <div class="arrow-2"><i class="fas fa-arrow-down"></i></div>
    <div class="img-2"></div>
    <div class="img-3-title">Wikipedia search bar connected to the wikipedia API</div>
    <div class="arrow-3"><i class="fas fa-arrow-down"></i></div>
    <div class="img-3"></div>
    <div class="img-4-title">Vanilla js calculator</div>
    <div class="arrow-4"><i class="fas fa-arrow-down"></i></div>
    <div class="img-4"></div>
  </div>
</section>

我重新声明网格区域的原因是，如果不这样做，则控制台中会出现黄色错误。可以，但是我不喜欢这个错误，是的。

css 

       .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "title"
        "img-1-title"
        "arrow-1"
        "img-1"
        "img-2-title"
        "arrow-2"
        "img-2"
        "img-3-title"
        "arrow-3"
        "img-3"
        "img-4-title"
        "arrow-4"
        "img-4";
        background: rgb(27, 27, 27);
    }

    .title {
        grid-area: title;
        padding: 20px 0;
        font-family: Verdana, Tahoma, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 900;
        color: white;
    }

    .img-1 {
        grid-area: img-1;
        background: url("../postimg/chat_app.png") center/cover;
        height: 300px;
    }

    .img-2 {
        grid-area: img-2;
        background: url("../postimg/Web_template.png") center/cover;
        height: 300px;
    }

    .img-3 {
        grid-area: img-3;
        background: url("../postimg/Wiki_viewer.png") center/cover;
        height: 300px;
    }

    .img-4 {
        grid-area: img-4;
        background: url("../postimg/js_calculator.png") center/cover;
        height: 300px;
    }

    .img-1-title {
        grid-area: img-1-title;
    }

    .img-2-title {
    grid-area: img-2-title;
    }

    .img-3-title {
        grid-area: img-3-title;
    }

    .img-4-title {
    grid-area: img-4-title;
    }

    .img-1-title, .img-2-title, .img-3-title, .img-4-title {
        display: flex;
        height: 80px;
        padding: 8px;
        justify-content: center;
        align-items: center;
        font-weight: 200;
        font-family: Verdana, Tahoma, sans-serif;
        font-style: italic;
        color: white;
        border-top: 3px solid rgb(15, 177, 15);
    }

    .arrow-1 {
        grid-area: arrow-1;
    }

    .arrow-2 {
        grid-area: arrow-2;
    }

    .arrow-3 {
        grid-area: arrow-3;
    }

    .arrow-4 {
        grid-area: arrow-4;
    }

    .arrow-1, .arrow-2, .arrow-3, .arrow-4 {
        display: flex;
        padding: 15px;
        height: 25px;
        justify-content: center;
        font-size: 20px;
    }

    .fas {
        color: white;
    }

    @media only screen and (min-width: 1000px) {
        .grid {
            grid-template-columns: 200px 1fr 1fr 200px;
            grid-template-areas: 
            ". title title ."
            ". img-1-title img-2-title ."
            ". img-1 img-2 ."
            ". img-3-title img-4-title ."
            ". img-3 img-4 .";
            background: rgb(27, 27, 27);
        }

        .title {
            grid-area: title;
        }

        .img-1 {
            grid-area: img-1;
        }

        .img-2 {
            grid-area: img-2;
        }

        .img-3 {
            grid-area: img-3;
        }

        .img-4 {
            grid-area: img-4;
        }

        .img-1-title {
            grid-area: img-1-title;
        }

        .img-2-title {
        grid-area: img-2-title;
        }

        .img-3-title {
            grid-area: img-3-title;
        }

        .img-4-title {
        grid-area: img-4-title;
        }

        div.arrow-1, div.arrow-2, div.arrow-3, div.arrow-4 {
            display: none;
        }
    }

2 个答案:

答案 0 :(得分：1)

也许只是我一个人，但对我来说一切似乎都很好。 它将媒体查询更改为1000px。

enter image description here

我唯一要更改的是使用网格间隙，以使图像不会聚集在一起。这将大大改善较小设备上的外观。

.grid {
  grid-gap: 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "img-1-title" "arrow-1" "img-1" "img-2-title" "arrow-2" "img-2" "img-3-title" "arrow-3" "img-3" "img-4-title" "arrow-4" "img-4";
  background: rgb(27, 27, 27);
}

.title {
  grid-area: title;
  padding: 20px 0;
  font-family: Verdana, Tahoma, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  color: white;
}

.img-1 {
  grid-area: img-1;
  background: url("http://placekitten.com/1500/650") center/cover;
  height: 300px;
}

.img-2 {
  grid-area: img-2;
  background: url("http://placekitten.com/1500/500") center/cover;
  height: 300px;
}

.img-3 {
  grid-area: img-3;
  background: url("http://placekitten.com/2500/500") center/cover;
  height: 300px;
}

.img-4 {
  grid-area: img-4;
  background: url("http://placekitten.com/1500/600") center/cover;
  height: 300px;
}

.img-1-title {
  grid-area: img-1-title;
}

.img-2-title {
  grid-area: img-2-title;
}

.img-3-title {
  grid-area: img-3-title;
}

.img-4-title {
  grid-area: img-4-title;
}

.img-1-title,
.img-2-title,
.img-3-title,
.img-4-title {
  display: flex;
  height: 80px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  font-weight: 200;
  font-family: Verdana, Tahoma, sans-serif;
  font-style: italic;
  color: white;
  border-top: 3px solid rgb(15, 177, 15);
}

.arrow-1 {
  grid-area: arrow-1;
}

.arrow-2 {
  grid-area: arrow-2;
}

.arrow-3 {
  grid-area: arrow-3;
}

.arrow-4 {
  grid-area: arrow-4;
}

.arrow-1,
.arrow-2,
.arrow-3,
.arrow-4 {
  display: flex;
  padding: 15px;
  height: 25px;
  justify-content: center;
  font-size: 20px;
}

.fas {
  color: white;
}

@media only screen and (min-width: 1000px) {
  .grid {
    grid-template-columns: 200px 1fr 1fr 200px;
    grid-template-areas: ". title title ." ". img-1-title img-2-title ." ". img-1 img-2 ." ". img-3-title img-4-title ." ". img-3 img-4 .";
    background: rgb(27, 27, 27);
  }
  .title {
    grid-area: title;
  }
  .img-1 {
    grid-area: img-1;
  }
  .img-2 {
    grid-area: img-2;
  }
  .img-3 {
    grid-area: img-3;
  }
  .img-4 {
    grid-area: img-4;
  }
  .img-1-title {
    grid-area: img-1-title;
  }
  .img-2-title {
    grid-area: img-2-title;
  }
  .img-3-title {
    grid-area: img-3-title;
  }
  .img-4-title {
    grid-area: img-4-title;
  }
  div.arrow-1,
  div.arrow-2,
  div.arrow-3,
  div.arrow-4 {
    display: none;
  }
}
<section>
  <div class="grid">
    <div class="title">Here is a couple of side projects</div>
    <div class="img-1-title">A chat app build with socket.io and node.js</div>
    <div class="arrow-1"><i class="fas fa-arrow-down"></i></div>
    <div class="img-1"></div>
    <div class="img-2-title">A responsive mock template of a company build with html css and flexboxgrid</div>
    <div class="arrow-2"><i class="fas fa-arrow-down"></i></div>
    <div class="img-2"></div>
    <div class="img-3-title">Wikipedia search bar connected to the wikipedia API</div>
    <div class="arrow-3"><i class="fas fa-arrow-down"></i></div>
    <div class="img-3"></div>
    <div class="img-4-title">Vanilla js calculator</div>
    <div class="arrow-4"><i class="fas fa-arrow-down"></i></div>
    <div class="img-4"></div>
  </div>
</section>

enter image description here

很抱歉我误解了你的问题：D

问题可能出在您的浏览器上，因为您在那里已经遇到问题了。

  

我重新声明网格区域的原因是，如果不这样做，则控制台中会出现黄色错误。可以，但是我不喜欢这个错误，是的。

Firefox似乎工作正常，因此您可以尝试使用它。他们也有一个不错的网格视图，向您显示css网格。

作为参考，我的firefox版本为 Firefox Quantum 61.0.1 (64-Bit)

由于您使用的是Chrome，因此我也查看了Chrome中的问题，并且文件在我的Chrome版本 Version 68.0.3440.75 (official build) (64-Bit) 上也能正常工作

您可能应该检查chrome的版本，并将其与supported browser的列表进行比较。

如果您不知道如何检查浏览器版本，则这里是大多数现代Web浏览器的小指南。 [LINK]

答案 1 :(得分：0)

OMG，我发现了我的问题，我的div之前有<a>个标签，这些标签弄乱了网格，我不知道为什么我不将它们包含在HTML中，我以为不是问题是-额头sm。

相关问题
最新问题