根据元素的宽度更改 CSS [重复]

Question

是否有一种纯CSS方式为元素指定不同的CSS样式，仅当它在一定宽度下时才有效？

类似于

@media

查询，但不是整个屏幕，只是元素。类似...

.element {
    background: blue;
}
.element[max-width=300] {
    background: red;
}

我知道如何使用 JavaScript 来做到这一点，但这听起来太复杂了...>.<

Answer 1

媒体查询仅适用于设备屏幕的尺寸，即查看网站的媒体。所以，不幸的是，你不能用 CSS 来做到这一点。

JavaScript 可能听起来像是一种复杂且夸张的方法，但它将是最好、最高效、最可维护的方法。如果您要将其与页面上的许多元素一起使用，您甚至可以考虑使用 React 或 Angular 之类的东西。对于一些小东西来说，这些会非常夸张，但如果你要大规模地这样做，它会更容易维护和使用。

如果您可以计算出您想要更改的特定元素的尺寸对应的整个屏幕的尺寸，您可以尝试使用媒体查询。这可能会比 JavaScript 更复杂，并且可能会使维护变得更加复杂。