html - 根据元素的宽度更改 CSS

Question

是否有一种纯粹的 CSS方式来为元素指定不同的 CSS 样式，仅在它处于特定宽度时才处于活动状态？

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

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

我知道我会怎么用 JavaScript 来做，但这听起来太复杂了……>.<

标签： htmlcssstyles

Answer 1

媒体查询仅适用于设备屏幕的大小，即浏览网站的媒体。所以，不幸的是，你不能用 CSS 做到这一点。

JavaScript 可能听起来像是一种复杂且过于复杂的方法，但它会是最好、最有效和最易于维护的方法。如果你要在页面上使用很多元素，你甚至可以考虑使用 React 或 Angular 之类的东西。对于一些小东西来说，这些将是非常过分的，但如果你在更大的范围内这样做，它会更容易维护和使用。

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