我可以在媒体查询中包括和排除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;
}
}