在桌面上显示div并使用CSS在移动设备上显示另一个div

Question

我想在桌面和平板电脑上显示一个特定的div，但我想在移动屏幕上隐藏这个div。在移动屏幕上我想显示另一个div，所以我想换掉两个div。

这是我的尝试：

.div-only-mobile {
    visibility: hidden;
    display: none;
}

@media screen and (max-width: 849px) {

.div-no-mobile {
    visibility: hidden;
}

.div-only-mobile {
    visibility: visible;
    display: block;
}

}

Answer 1

.div-only-mobile {
    display: none;
}
.div-no-mobile {
    display: block;
}
@media screen and (max-width: 849px) {

.div-no-mobile {
    display:none
}

.div-only-mobile {
    display: block;
}

}

Answer 2

是的，使用media query可以hide div某个screen-resolution，如下例所示，但CSS样式属性visibility仅hides一个{ {1}}，但仍可element影响其他元素，隐藏它完全使用layout作为display，请尝试以下示例，

＆＃13;

＆＃13;

none

＆＃13;

.desk{
  width:400px;
  height:200px;
  background:red;
}
.div-only-mobile{
  width:400px;
  height:200px;
  background:orange;
}
@media screen and (max-width : 1920px){
  .div-only-mobile{
  visibility:hidden;
  }
}
@media screen and (max-width : 906px){
 .desk{
  visibility:hidden;
  }
 .div-only-mobile{
  visibility:visible;
  }
}

＆＃13;

＆＃13;

＆＃13;