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

2022-08-22 00:00:00 css show-hide

我想在台式机和平板电脑上显示特定的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 query您可以hide div在某些screen-resolution,但CSS样式属性visibility只是hides一个element,但仍然layout可见,影响其他元素,要完全隐藏它,请使用display作为none,请尝试以下示例

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.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>

相关文章