基于宽度的CSS选择器？

Question

是否有基于宽度匹配元素的CSS规则？如果没有，那么在标准中提出这个意见会不会很有意思？

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

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

Answer 1

  

是否存在基于宽度匹配元素的CSS规则？

没有

  

如果没有，那么在标准中提出这个意见会不会很有意思？

可能，但不是Selectors标准，因为Selectors并不打算与CSS的样式方面紧密结合。

几年前，有人建议将“元素查询”标准化，但除了一些概念证明之外，它们似乎已经大部分消失了。可能是因为它们以规范和实现的方式不可行（强大的循环依赖性）。

Answer 2

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

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

Answer 3

使用CSS3无法做到这一点，但您可以使用Element Queries。检查此库：https://elementqueries.com

以下是一个例子：

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

Answer 4

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