Question

我最近一直在使用媒体查询，我只是想弄清楚我可以改变和不能改变的地方。我的问题很简单。

您可以选择在@media查询中排除还是包括某些元素？

例如，为移动设备设计了我的网站，我还想扩展它并使之可用于更大的视口！但是，随着更大的视口，我感觉我想添加更多的内容，但是，当然，我不知道是否可以不直接将其添加到HTML代码中而直接添加，当然，如果我这样做，我只会添加我的移动设计中有很多东西。

在这种情况下我该怎么办？

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

@media only screen /* Tablet */
  and (min-width: 768px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }    

@media screen /* Desktop/Laptop */
  and (min-width: 1900px) {
    .container  {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 10fr 1fr;
    grid-template-areas:
      "header header"
      "advert main"
      "footer footer"
    }

Answer 1

有多种方法可以根据屏幕大小显示或隐藏内容，但是内容本身很可能必须保留在HTML中。我只更改过CSS中的图片。您可以在要显示或隐藏的内容附带的媒体查询中使用“ display：none”。例如：

@media(max-width:1200px){
 .desktop-content{
 display: none;
}
}
@media(min-width:1201px){
 .desktop-content{
 display: block;
}
}

我可以在媒体查询中包含和排除html文本吗？

1 个答案: