基于宽度的CSS选择器？答案

【问题标题】：CSS selector based on width?基于宽度的CSS选择器？
【发布时间】：2019-08-30 00:03:07
【问题描述】：

是否有一个 CSS 规则可以根据元素的宽度匹配元素？如果不是，在标准中提出这一点会很有趣吗？

可以做类似code:max-width(200px) { white-space: nowrap; } 的操作来让所有小代码标签强制换行。

我知道我可以使用一些 js。

【问题讨论】：

您已经可以定义一个 CSS 类来包含您想要的特定样式，然后使用类名作为选择器

标签： css css-selectors

【解决方案1】：

是否有根据宽度匹配元素的 CSS 规则？

没有。

如果不是，在标准中提出这个建议会很有趣吗？

也许可以，但不是 Selectors 标准，因为 Selectors 并非旨在与 CSS 的样式方面紧密结合。

几年前曾有人提议将一种称为“元素查询”的东西标准化，但除了一些概念验证之外，它们似乎大多已消散。可能是因为它们无法以稳健的方式规范和实现（循环依赖立即浮现在脑海中）。

【讨论】：

第二个是因为我们有媒体查询，肯定可以处理他的想法
@Temani Afif: stackoverflow.com/questions/12251750/…
我知道 :) 但我的意思是，如果我们知道我们开发的网站，我们就知道我们的元素何时会在某个断点达到特定宽度，因此使用媒体查询我们可以处理这个......当然不是在谈论元素是动态或交互式等的复杂情况，因为在这种情况下我们涉及到 JS，我们可以用 JS 来处理这个问题
@Temani Afif：是的，如果您可以直接将元素的宽度与媒体查询相关联，那么没有人会阻止您使用媒体查询，但很明显媒体查询并非旨在解决那种问题（出于你在评论中已经给出的原因），我们不应该假装他们是。

【解决方案2】：

这可能会变得不一致，因为新元素可能会受到意外影响。我只需将定义 {wrap: nowrap;} 的类添加到您的 html 中的任何元素。或者如果元素宽度在调整大小时发生变化，只需使用一些js。

window.onscroll = function(){
    var elementWidth = document.getElementById('elementID').style.width;
    if(elementWidth < 200){ .. do something .. }
    else{ .. reverse changes .. }
}

【讨论】：

【解决方案3】：

使用 CSS3 是不可能的，但您可以使用元素查询。检查这个库：https://elementqueries.com

这是一个例子：

@element code and (max-width: 200px) {
  :self {
    white-space: nowrap;
  }
}

【讨论】：

【解决方案4】：

我刚刚看到了一个选择器中的媒体查询示例，实际上是一样的，尽管伪选择器会非常好，并且可能会取代媒体查询。我认为有一个新的伪选择器 :aspect-ratio(4:3) 支持像 :aspect-ratio(>4:3) 这样的范围会很好。这对于根据方向和宽高比设置响应式元素的样式非常方便。

【讨论】：