Html 如何解决此CSS显示问题？

我对移动查询的CSS

display:none

有一个问题，如下面的代码所示。当屏幕宽度减小到

600px

时，

@media

查询规则将删除应显示的div

根据

@media

规则，div

.mobile content

将与div

.desktop content

一起删除。移动屏幕变为空白，因为两个div都被删除，而不是

。桌面内容

我怀疑这是一个简单的问题…如何解决这个问题

这是代码

。桌面内容{
背景色：黑色；
颜色：白色；
字号：28px；
}
.移动内容{
显示：无；
}
@介质（最大宽度：600px）{
.移动内容{
背景颜色：绿色；
颜色：白色；
字号：28px；
}
.桌面内容{
显示：无；
}
}

台式机和移动设备
这只是桌面内容

这只是移动内容

添加

显示：块字体下的code>大小：28px像这样

@media(max-width:600px) {
  .mobile-content {
    background-color: green;
    color: white;
    font-size: 28px;
    display: block;
  }
  .desktop-content {
    display: none;
  }
}

问题不在于两者都被移除了。首先是手机没有被显示出来。您的代码应该如下所示：


。桌面内容{
背景色：黑色；
颜色：白色；
字号：28px；
}
.移动内容{
显示：无；
}
@介质（最大宽度：600px）{
.移动内容{
显示：块；
背景颜色：绿色；
颜色：白色；
字号：28px；
}
.桌面内容{
显示：无；
}
}

台式机和移动设备
这只是桌面内容

这只是移动内容

如果可以，您可以使用额外的媒体查询，或者只添加
显示：块
到您的
.mobile content{}
内
@媒体（最大宽度：600px）{}
，如其他答案所示

这将解决问题。守则如下：


@介质和所有（最小宽度：600px）{
.移动内容{
显示：无；
}
}
.桌面内容{
背景色：黑色；
颜色：白色；
字号：28px；
}
@全部和全部介质（最大宽度：600px）{
.移动内容{
背景颜色：绿色；
颜色：白色；
字号：28px；
}
.桌面内容{
显示：无；
}
}

台式机和移动设备
这只是桌面内容

这只是移动内容

只需添加样式
显示：块
到@media query中的
.mobile content
。它仍然显示
none
。