Javascript 使用@media only screen隐藏div实现移动视图的问题

当div id“map wrapper”中的所有3个div id（基础地图、覆盖地图、平铺地图）都将显示在桌面视图中时，我试图隐藏div id“平铺地图”

我正在使用引导CSS。对于divid“map wrapper”，我还没有任何特殊的CSS类，但我在初始设置时将其宽度强制为200%。不过，我想在mobile view中将其宽度修改为100%——我在Bootstrap中创建了CSS的一部分。我知道我为div类做的一些事情“移动隐藏”是多余的，我正在尝试

部分代码如下所示

HTML:

我如何解决这个问题

---

更新（已解决）：

CSS:

头{
背景色：#473731；
}
身体{
保证金：0；
背景色：#473731；
}
#地图包装器{
宽度：1140px；
高度：640px；
位置：相对位置；
保证金：0自动；
}
@仅介质屏幕和（最大宽度：479px）{
标题{显示：无；}
h1{宽度：70%！重要；字体重量：150！重要；}
#地图包装{宽度：70%！重要；高度：320px！重要；}
#map wrapper.searchtxt{left:30px；width:50px！important；}
#map1{宽度：100%；}
#map2{显示：无；}
}
@仅介质屏幕和（最大宽度：799px）{
h1{宽度：80%！重要；字体重量：200！重要；}
#地图包装{宽度：80%！重要；高度：480px！重要；}
#map wrapper.searchtxt{left:50px；width:200px！important；}
}
@仅介质屏幕和（最大宽度：959px）{
h1{宽度：90%！重要；字体重量：250！重要；}
#地图包装{宽度：90%！重要；高度：640px！重要；}
}
@仅介质屏幕和（最大宽度：1023px）{
#映射包装器{宽度：90%！重要；}
}
/*并排设置两个贴图*/
#map1{
宽度：49.5%；
身高：100%；
左：0%；
排名：0；
位置：绝对位置；
边框颜色：#000000；
边界半径：5px；
z指数：0；
}.fullscreen图标{背景图像：url（“lib//fullscreen/icon fullscreen.png”）；}
#map1:-webkit全屏{宽度：100%！重要；高度：100%！重要；z索引：99999；}
#map1:-moz全屏{宽度：100%！重要；高度：100%！重要；z索引：99999；}
#map1:全屏{宽度：100%！重要；高度：100%！重要；z索引：99999；}
.传单伪全屏{位置：固定！重要；宽度：100%！重要；高度：100%！重要；顶部：0px！重要；左侧：0px！重要；z索引：99999；}
#地图1：悬停{
宽度：49.5%；
身高：100%；
左：0%；
排名：0；
位置：绝对位置；
边界半径：8px；
过渡：0.8s；
盒影：3px 3px 10px#8888888；
z指数：0；
}
#map2{
宽度：49.5%；
身高：100%；
左：50%；
排名：0；
位置：绝对位置；
边框颜色：#000000；
边界半径：5px；
z指数：0；
}
#地图2：悬停{
宽度：49.5%；
身高：100%；
左：50%；
排名：0；
位置：绝对位置；
边界半径：8px；
过渡：0.8s；
盒影：3px 3px 10px#8888888；
z指数：0；
}

看看这把小提琴。请注意，当您将媒体查询中的

最大宽度

提高到大于当前使用屏幕的大小时，项目将消失。当

max width

降低到小于屏幕大小时，您将看到红色div

请注意，在编写更改可见性的媒体查询之前，我为div设置了默认样式。您需要确保您编写的媒体查询将覆盖任何已设置的属性

---

您可以使用

隐藏xs

类来隐藏手机。上面的代码应该隐藏div

#平铺地图

以及与之关联的类为“mobile hide”的div。您应该检查在定义这些属性（例如，在另一个css中定义）后，您没有覆盖这些属性file@Morpheus所以我在我的“底图”和“叠加图”上使用了那个类

隐藏的xs

？我明白：隐藏sm隐藏md=可见lg，隐藏sm隐藏lg=可见md，隐藏md隐藏lg=可见-sm@Kinburn101在这个示例中，您能在jsfiddle或bl.ocks中帮助我吗？非常感谢。金本101是对的。它似乎工作得很好。尝试此操作，使用处理程序重新调整输出窗口的大小并进行检查。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6">
        <div id="map-wrapper" class="mobile-hide" style="width: 200%; height: 600px; position: relative;">
            <div id="base-map"></div>
            <div id="overlay-map"></div>
            <div id="tiled-map"></div>
        </div>
        </div>
    </div>
</div>

@media only screen and (max-width: 480px) {
  #tiled-map {
    visibility: hidden !important;;
    display: none !important;
  }
  .mobile-hide {
    width: 100%;
    visibility: hidden !important;;
    display: none !important;
  }
}

<div class="container">
    <div class="row">
        <div id="map-wrapper">

            <div id="map1"></div>
            <div id="map2"></div>

            <input id="searchtxt" class="searchtxt" type="text" style="z-index:100; position: relative; top: 20px; left: 70px; border-radius: 5px; width: 250px; font-family: 'Archivo Narrow', Arial; font-weight: 400;  "onkeyup="liveSuggest(this.value)" />
            <div class="dropdown" id="searchResultList" style="z-index:10; position: absolute; top: 50px; left: 50px;font-family: 'Archivo Narrow', Arial; font-weight: 400; width: 300px"/ >

        </div>            
            <!-- Pager -->
            <ul class="pager">
                <li class="next">
                </li>
            </ul>  
    </div>
</div>

<style>
    head {
        background-color: #473731;
    }
    body {
        margin: 0;
        background-color: #473731;
    }


    #map-wrapper {
         width: 1140px;
         height: 640px;
         position: relative;
         margin: 0 auto;
    }

    @media only screen and (max-width: 479px) {
        header { display: none; }
        h1 { width: 70% !important; font-weight: 150 !important; }
        #map-wrapper { width: 70% !important; height: 320px !important; }
        #map-wrapper .searchtxt { left: 30px; width: 50px !important; }
        #map1 { width: 100%; }
        #map2 { display: none; }
    }

    @media only screen and (max-width: 799px) {
        h1 { width: 80% !important; font-weight: 200 !important; }
        #map-wrapper { width: 80% !important; height: 480px !important; }
        #map-wrapper .searchtxt { left: 50px; width: 200px !important; }
    }

    @media only screen and (max-width: 959px) {
        h1 { width: 90% !important; font-weight: 250 !important; }            
        #map-wrapper { width: 90% !important; height: 640px !important; }          
    }

    @media only screen and (max-width: 1023px) {
        #map-wrapper { width: 90% !important; }           
    }

   /* set the two maps side by side */

    #map1 {
        width: 49.5%;
        height: 100%;
        left: 0%;
        top: 0;
        position: absolute;
        border-color: #000000;
        border-radius: 5px;
        z-index: 0;

    }.fullscreen-icon { background-image: url("lib//fullscreen/icon-fullscreen.png"); }
    #map1:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
    #map1:-moz-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
    #map1:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
    .leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }

    #map1:hover {
        width: 49.5%;
        height: 100%;
        left: 0%;
        top: 0;
        position: absolute;
          border-radius: 8px;  
          transition: 0.8s;
          box-shadow: 3px 3px 10px #888888;
          z-index: 0;
        }


    #map2 {
        width: 49.5%;
        height: 100%;
        left: 50%;
        top: 0;
        position: absolute;
        border-color: #000000;
        border-radius: 5px;
            z-index: 0;
    }
    #map2:hover {
        width: 49.5%;
        height: 100%;
        left: 50%;
        top: 0;
        position: absolute;
          border-radius: 8px;  
          transition: 0.8s;
          box-shadow: 3px 3px 10px #888888;
          z-index: 0;
        }