媒体查询 CSS 的问题

Question

我们的团队是响应式设计的新手，正在尝试使用移动优先框架进行编码。我们正在尝试使用媒体查询来扩大屏幕尺寸，但似乎无法使其正常工作。这是我们的 CSS 到目前为止的样子：

.flex, .cards, .card {
  display: flex;
}

.flex {
  flex-wrap:wrap;
}

.cards, .card {
  align-items:center;
}

.cards {
  padding: 1em;
  background-color: $color-lightest;
  box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
}

@media screen and (min-width: 480px) {
  .cards {
    width: 49%;
    margin: 1%;  
  }

  .cards:nth-of-type(even) {
    margin-right: 0;
  }

  .cards:nth-of-type(odd) {
    margin-left: 0;
  }
}

@media screen and (min-width: 1024px) {
  .cards {
    width: 32%;
    margin: 1%;
  }

  .cards:nth-of-type(3n) {
    margin-right: 0;
  }

  .cards:nth-of-type(3n+1) {
    margin-left: 0;
  }
}

当我们将屏幕尺寸设置为 1024 像素时，结果如下所示：

当我们检查 div 时，看起来 480px 和 1024px 的媒体查询 css 都在触发。我们在这里做错了什么？

编辑：添加 HTML

<div class="flex" ng-init="init(user.sys_id)">
  <div  class="cards" ng-repeat="task in data.tasks | orderBy: ['order']" >
    <div  class="card" ng-click="c.onWidget(task);">
      <i ng-if="task.finished" class="{{task.icon}} fa-5x card-img finished" aria-hidden="true"></i>
      <i ng-if="!task.finished && task.isOverDue" class="{{task.icon}} fa-5x card-img overdue" aria-hidden="true"></i>
      <i ng-if="!task.finished && !task.isOverDue" class="{{task.icon}} fa-5x card-img pending" aria-hidden="true"></i>
      <div class="card-content">
        <h4>
          <!--<a href="?id=hri_task_details&table=sn_hr_core_task&sys_id={{task.sys_id}}" id="task_{{$index}}">{{::task.short_description}}</a>-->
          <a ng-click="">{{::task.short_description}}</a>
        </h4>
        <span ng-if="!task.finished">
          <span class="text-normal" ng-if="task.due_date">${Due by} {{::task.due_date | date: 'mediumDate' }}
            <span class="text-warning" ng-if="task.isOverDue"> (${Overdue})</span>
          </span>
        </span>
        <span ng-if="task.finished" class="text-muted">${Completed at} {{::task.closed_at | date: 'mediumDate'}}</span>
      </div>
      <div>
        <i alt="${Open}" ng-if="!task.finished && task.isOverDue" class="m-l-sm fa fa-square-o fa-2x overdue"></i>
        <i alt="${Open}" ng-if="!task.finished && !task.isOverDue" class="m-l-sm fa fa-square-o fa-2x pending"></i>
        <i alt="${Completed}" ng-if="task.finished" class="m-l-sm fa fa-check-square-o fa-2x finished"></i>
      </div>   
    </div>
  </div>
</div>

Answer 1

尝试将您的第一个媒体查询更改为：

@media screen and (min-width: 480px) and (max-width: 1023.99px) {
    ...
}

.cards:nth-of-type(3n) 和 .cards:nth-of-type(even) 似乎都适用。

Answer 2

“最小宽度：480px”应该是“最大宽度：480px”吗？

由于当前定义了 CSS，一旦屏幕达到 1024 像素宽度，那么两个最小宽度条件以及适用的 CSS 定义都会启用。