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

【问题标题】：Show a div on desktop and show another div on mobile with CSS使用 CSS 在桌面上显示一个 div 并在移动设备上显示另一个 div
【发布时间】：2017-05-26 18:36:22
【问题描述】：

我想在台式机和平板电脑上显示一个特定的 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;
}

}

【问题讨论】：

只需使用@media all 并将display: none 设置为 div-no-mobile 就可以了？

标签： css show-hide

【解决方案1】：

是的，使用media query，您可以在某些screen-resolution 处使用hide div，如下例所示，但CSS 样式属性visibility 只是hides 和element，但仍然可以看到layout 的效果其他元素，完全隐藏它使用display 作为none，试试下面的例子，

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

<div class="desk">Large Screen</div>
<div class="div-only-mobile">Only Mobile</div>
<p>Demo Text.</p>

【讨论】：

仅使用可见性会使 div 即使不可见也会占用空间。
@thepio 是的，它只是隐藏元素而不是布局，因为在上面的代码中它会影响布局并且 p 标签在底部对齐，而如果 display:none 完全隐藏布局中的 div。只是添加它们之间的差异。

【解决方案2】：

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

}

【讨论】：