Question

我正在开发一个具有独特规则集的应用程序这是一个简化的规则集：

“主要实体”始终可见
只有一个“主要实体”
“主要实体”可以位于列表中的任何位置
在大屏幕上，应该有不超过7个可见实体（1个主要实体和6个常规实体）
在中型屏幕上，应该有不超过4个可见实体（1个主要和3个常规）
在小屏幕上，应该有不超过2个可见实体（1个主要和1个常规）
应首先显示最后的元素。

这是CSS：

.btn-breadcrumb > li.main-entity {
  display: block;
  color: red;
}
.btn-breadcrumb > li {
  display: none;
}
/* === For phones =================================== */
@media (max-width: 767px) {
  .btn-breadcrumb > li:nth-last-child(-n+1) {
    display: block;
  }
}
/* === For tablets ================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .btn-breadcrumb > li:nth-last-child(-n+3) {
    display: block;
  }
}
/* === For desktops ================================== */
@media (min-width: 992px) {
  .btn-breadcrumb > li:nth-last-child(-n+6) {
    display: block;
  }
}

这是一些HTML：

<ul class="btn-breadcrumb">
  <li>Entity 1</li>
  <li>Entity 2</li>
  <li>Entity 3</li>
  <li>Entity 4</li>
  <li>Entity 5</li>
  <li>Entity 6</li>
  <li class="main-entity">Entity 7</li>
  <li>Entity 8</li>
</ul>

当主实体位于列表的开头时，没有问题。 See a simple fiddle here。更改宽度以查看其实际效果。

但是，如果主要实体是最后一个元素之一，那我就是1. See here。

在最初的实现中，主实体总是处于位置1，因此很容易实现。现在要求主实体可以移动，我不确定根据屏幕大小确定主实体是否在可见的实体集中的最佳方法。我知道这不能完全用CSS完成（我已经通过几个讨论，如here，解释了为什么伪类不能应用于选择器）。

使用jQuery，我可以检测调整大小事件并确定屏幕宽度，然后相应地设置可见元素。这似乎非常多余，必须将我的媒体查询值拉入我的代码。这真的是唯一的解决方案吗？

Answer 1

您可以使用以下内容避免将媒体查询添加到Javascript中：

的JavaScript

$('.btn-breadcrumb > li:not(.main-entity)').slice(-1).addClass('phone');
$('.btn-breadcrumb > li:not(.main-entity)').slice(-3).addClass('tablet');
$('.btn-breadcrumb > li:not(.main-entity)').slice(-6).addClass('desktop');

CSS

/* === For phones =================================== */
@media (max-width: 767px) {
  .btn-breadcrumb > li.phone {
    display: block;
  }
}
/* === For tablets ================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .btn-breadcrumb > li.tablet {
    display: block;
  }
}
/* === For desktops ================================== */
@media (min-width: 992px) {
  .btn-breadcrumb > li.desktop {
    display: block;
  }
}

HTML将输出如下：

<ul class="btn-breadcrumb">
<li>Entity 1</li>
<li class="desktop">Entity 2</li>
<li class="desktop">Entity 3</li>
<li class="desktop">Entity 4</li>
<li class="tablet desktop">Entity 5</li>
<li class="tablet desktop">Entity 6</li>
<li class="main-entity">Entity 7</li>
<li class="phone tablet desktop">Entity 8</li>
</ul>

将.main-entity课程移至另一个列表项目，您将看到它符合您的规则。

https://jsfiddle.net/rr5Lcjok/60/

结合媒体查询，最后类型和类名

1 个答案: