Css 为什么媒体查询不起作用

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

---

使用

@仅媒体屏幕和（最小宽度：769px）{}

像

---

或者使用

@纯媒体屏幕和（最大宽度：768px）{}

并反转css代码，就像这样。

不清楚你在问什么，因为它似乎工作正常：（我为较小的屏幕提供了两个元素红色背景，为较大的屏幕提供了蓝色背景，以便它立即可见。）@CBroe-its，因为你正在用小提琴进行测试，尝试创建一个页面，然后运行。@DanishAdeel:为什么这是一个小提琴的事实与此有任何关系？@CBroe我想让div的类“搜索表单”和“范围选择器”在大屏幕的情况下并排显示，在移动屏幕的情况下分开显示。我指的是你的小提琴。两个屏幕的工作原理相同。如果视口足够宽，则元素彼此相邻，如果视口不够宽，则元素彼此下方。

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