我们的团队是响应式设计的新手,正在尝试使用移动优先框架进行编码。我们正在尝试使用媒体查询来扩大屏幕尺寸,但似乎无法使其正常工作。这是我们的 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 时,结果如下所示:
当我们检查 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>
最佳答案
尝试将您的第一个媒体查询更改为:
@media screen and (min-width: 480px) and (max-width: 1023.99px) {
...
}
.cards:nth-of-type(3n)
和 .cards:nth-of-type(even)
似乎都适用。
关于css - 媒体查询 CSS 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53838870/