javascript - 使用@media only 屏幕实现移动 View 以隐藏 div 的概率

Question

我试图在移动 View 中隐藏 div id“tiled-map”，而 div id“map-wrapper”中的所有 3 个 div id( basemap 、覆盖图、平铺 map )将显示在桌面 View 中。

我正在使用 Bootstrap CSS。我还没有用于 div id“map-wrapper”的任何特殊 CSS 类，但我在初始时将其宽度强制为 200%。但是，我想在移动 View 上将其宽度修改为 100%——我已经在 Bootstrap 中创建了一段 CSS。我知道我为 div 类“移动隐藏”做了一些多余的事情，我正在试验它。

部分代码如下所示。

HTML:

<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>

CSS:

@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>

CSS:

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

Answer 1

看看这个 fiddle 。请注意，当您将媒体查询中的 max-width 提高到大于您当前使用的屏幕的大小时，这些元素将消失。当 max-width 的尺寸小于它占据的屏幕时，您将看到红色的 div。

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

http://jsfiddle.net/rzc7oLtp/1/