为什么媒体查询不起作用答案

【问题标题】：why media query is not working为什么媒体查询不起作用
【发布时间】：2016-07-30 12:44:26
【问题描述】：

我想在“搜索表单”和“范围选择器”类上应用不同的样式，对于移动屏幕和大屏幕不同。我使用了移动优先的 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;
          }
       }

【问题讨论】：

不清楚你在问什么，因为它似乎工作正常：jsfiddle.net/n5jjrajx（我给这两个元素设置了红色背景用于较小的屏幕，蓝色用于较大的屏幕，以便它立即可见。 )
@CBroe 是因为您正在小提琴中进行测试，请尝试创建一个页面然后运行。
@DanishAdeel：为什么这个问题与此有关？
@CBroe 我想让具有“搜索表单”和“范围选择器”类的 div 在大屏幕的情况下并排显示，在移动屏幕的情况下在单独的行上显示。我提到了你的小提琴。两个屏幕的工作方式相同。
如果视口足够宽，则元素彼此相邻，否则，元素彼此位于下方。

标签： css media-queries

【解决方案1】：

要么使用@media only screen and (min-width: 769px) {} 喜欢this

或使用 @media only screen and (max-width: 768px) {} 并反转您的 css 代码，例如 this。

【讨论】：