组合媒体查询、最后类型和 class 名称

Question

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

"main-entity" 始终可见
永远只有一个"main-entity"
"main-entity"可以在列表中的任意位置
在大屏幕上，可见实体不应超过 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 class 移动到另一个列表项，您会发现它符合您的规则。

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

组合媒体查询、最后类型和 class 名称

Combining media-queries, last-of-type, and class names

css

jquery

jquery-ui

media-queries