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

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;
}
}