用@media only屏幕實現移動視圖以隱藏div的問題

Question

我正在嘗試在移動視圖上隱藏div ID“平鋪地圖”，而div ID“ map-wrapper”中的所有3個div ID（基本地圖，覆蓋地圖，平鋪地圖）將顯示在桌面視圖。

我正在使用Bootstrap CSS。 我沒有用於div id“ map-wrapper”的任何特殊CSS類，但是我將其寬度初始設置為200％。 但是，我想在移動視圖上將其寬度修改為100％－我在Bootstrap中創建了一段CSS。 我知道我為div類“ mobile-hide”所做的事情是多余的，我正在對此進行嘗試。

部分代碼如下所示。

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

看看這個小提琴。 請注意，當您將媒體查詢中的max-width增大到大於當前使用的屏幕的大小時，該顯示將消失。 當max-width減小到小於其占用的屏幕大小時，您將看到紅色的div。

請注意，在編寫將更改可見性的媒體查詢之前，我已為div設置了默認樣式。 您需要確定您編寫的媒體查詢將覆蓋已設置的所有屬性。

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