Question

我想在课堂上应用样式＆＃34;搜索表单＆＃34;和＆＃34;范围选择器＆＃34;不同的移动屏幕和不同的大屏幕。我使用移动第一个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;
          }
       }

Answer 1

使用@media only screen and (min-width: 769px) {} 比如this

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

为什么媒体查询不起作用

1 个答案: