Question

如果浏览器宽度小于800px，我可以使用以下CSS来实现。

@media only screen and (max-width : 800px)
{
    #content
    {
        width: auto;
    }
}

如果特定元素的高度大于某个值，有没有办法让某些CSS发生在某个元素上？

我的目标是，如果元素的内容由于浏览器宽度太窄而开始换行，则会有特殊的CSS触发器，而不依赖于硬编码的最大宽度。

更具体的例子

<h2>Long title followed by <span class="subtitle">a subtitle</span></h2>


.subtitle
{
    margin-left: .7em;
    font-size: .6em;
}

@media only screen and (max-width : 600px)
{
    .subtitle
    {
        vertical-align: super;
        &:before
        {
            content: '\A';
            white-space: pre;
        }
    }
}

我需要的是.subtitle如果包装到另一行而不是标题的其余部分，则应该vertical-align: super。我目前在浏览器缩小到一定宽度时手动执行此操作，但问题是某些标头比此长，并且我希望每当标头换行时它会自动发生，与浏览器宽度无关。

Answer 1

不幸的是，媒体查询仅适用于屏幕尺寸（以及一些其他基于屏幕的属性）。您需要的是提议的“Element Query”。

这是CSS中的常见问题。一种解决方案是检测容器上的高度变化（示例中的<h1>）。它必须检测硬编码的像素值，并且当大于该阈值时切换一个类。您有一个额外的复杂性，即您需要的CSS更改将影响您正在测试的容器的高度，可能会创建一个测试和更改的循环循环。这是“元素查询”中最困难的挑战之一。

元素内容开始换行时触发CSS规则

1 个答案: