根据元素的宽度更改CSS

Question

是否有一种纯CSS 方法来为一个元素指定不同的CSS样式，仅当该元素处于特定宽度下时才有效？

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

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

我知道我该如何使用JavaScript，但这听起来太复杂了...>。<< / p>

Answer 1

媒体查询仅在设备屏幕的尺寸上有效，即在浏览网站的媒体上有效。因此，不幸的是，您无法使用CSS做到这一点。

JavaScript听起来像是一种复杂且过度的方法，但这将是最好，最有效和最可维护的方法。如果要在页面上使用很多元素，甚至可以考虑使用React或Angular之类的东西。如果您要进行较大规模的操作，这些功能可能会非常麻烦，但如果维护规模较大，则将使其更易于维护和使用。

如果您可以确定要更改的特定元素的大小，整个屏幕的大小将是多少，则可以尝试使用媒体查询。这可能会比JavaScript更复杂，并且可能会使维护更加复杂。