本文介绍了使用css在桌面上显示一个div，在移动设备上显示另一个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在台式机和平板电脑上显示特定的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>这篇关于使用css在桌面上显示一个div，在移动设备上显示另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！