Проблемы с медиа-запросами CSS - PullRequest
Новая
       65

Проблемы с медиа-запросами CSS

0 голосов
/ 18 декабря 2018

Наша команда является новичком в области адаптивного дизайна и пытается кодировать с помощью первой мобильной платформы.Мы пытаемся использовать медиа-запросы для увеличения размера экрана, но не можем заставить его работать правильно.Вот как выглядит наш 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;
  }
}

Результат выглядит так, когда мы устанавливаем размер экрана точно 1024px:

enter image description here

Когда мы проверяем div, похоже, что оба медиа-запроса css для 480px и 1024px запускаются.Что мы здесь делаем неправильно?

РЕДАКТИРОВАТЬ: добавление 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>

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Должно ли "min-width: 480px" быть "max-width: 480px"?

Поскольку CSS в настоящее время определен, как только экран достигает ширины 1024px, тогда оба условия минимальной ширины включенывместе с применимыми определениями CSS.

0 голосов
/ 18 декабря 2018

Попробуйте изменить свой первый медиа-запрос следующим образом: 

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

.cards:nth-of-type(3n) и .cards:nth-of-type(even), кажется, оба применяются.

...