爲什麼媒體查詢不起作用

-2

我想對類別「搜索窗體」和「範圍選擇器」應用不同的手機屏幕和不同的大屏幕樣式。我已經使用移動第一CSS方法。但它不工作。請告訴我我哪裏錯了。爲什麼媒體查詢不起作用

這是我的HTML文件 -

<div class="top-container"> 
    <div class="search-form"> 
     <form name="flight-search-form" class="flight-search-form"> 
      <div> 
       <label>Flytin from: </label> 
       <input type="text" placeholder="Enter Origin City" required /> 
      </div> 

      <div> 
       <label>Flytin to: </label> 
       <input type="text" placeholder="Enter Destination City" required /> 
      </div> 

      <div> 
       <label>Departing: </label> 
       <input type="date" placeholder="Departure Date" required /> 
      </div> 

      <div> 
       <label>No of passengers: </label> 
       <input type="number" placeholder="Passengers" required /> 
      </div> 

      <input type="submit" value="Search" /> 
     </form> 
    </div> 

    <div class="range-selector"> 
     <label for="priceRange"> 
      Price 
     </label> 
     <input type="range" name="priceRange" min="0" max="10000" step="500" class="price-selector pull-right"> 
    </div> 
</div>

這是我的CSS文件 -

.top-container { 
    border: 1px solid; 
    padding: 10px; 
    overflow: hidden; 
    margin-bottom: 20px; 
    } 

    .flight-search-form input { 
     display: block; 
    } 

    .search-form { 
     width: 100%; 
     border: 1px solid; 
     margin-bottom: 10px; 
    } 

    .range-selector { 
     width: 100%; 
     border: 1px solid; 
    } 

    .price-selector { 
     width: 100%; 
    } 

    @media only screen and (min-width: 768px) { 
     .search-form { 
      width: 60%; 
      border: 1px solid; 
      margin-bottom: 10px; 
      float: left; 
      color: red; 
     } 

     .range-selector { 
      width: 38%; 
      border: 1px solid; 
      float: right; 
      color: red; 
      } 
     }

來源

2016-04-09 Neha Gupta

不清楚你在問什麼，因爲它似乎工作得很好：https：//jsfiddle.net/n5jjrajx/（我給出了兩個元素紅色背景爲較小的屏幕，藍色一個較大的屏幕，以便它變得很快可見。） – CBroe

@CBroe它因爲你在小提琴測試，嘗試創建一個頁面，然後運行。 –

@DanishAdeel：爲什麼這個小提琴與小提琴有什麼關係？ – CBroe

-1

要麼使用@media only screen and (min-width: 769px) {} 像this

或使用@media only screen and (max-width: 768px) {}和反向你的CSS代碼一樣this 。

來源

2016-04-09 06:21:35

爲什麼媒體查詢不起作用

回答

相關問題