CSS - 当父容器较小时也可以在桌面上应用移动模式

Question

我有一个 HTML/CSS 小部件，可以集成到网站上的任何位置。该小部件是响应式的，并且具有以下移动规则：

@media screen and (max-width: 768px) {
  .bstfbt__price-cta--desktop {
    display: none;
  }

  .bstfbt__price-cta--mobile {
    align-self: center;
  }

  .bstfbt__price-cta--mobile > div {
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .bstfbt__price-cta--mobile {
    display: none;
  }
}

我还希望当放置小部件的父容器很小时，这些规则也适用于桌面。

我该如何进行？

Answer 1

不幸的是CSS不支持你想做的事情。但是，使用 Javascript 和 Resize Observer API，当元素的大小达到您定义的阈值时，您应该能够添加和删除类。