是否可以使用以固定增量增加宽度的元素？

Question

有点难以解释我想要达到的目标...我想要的是一个容器元素：

• 大小调整内容
• 但仅限固定增量 - 例如，150px，300px，450px等

因此，如果内容宽度为100px，则容器宽度为150px。如果内容增长到170px，容器的大小会跳到300px。等等。容器永远不会是200px宽。 150px或300px - 适合内容的最小值。

这是否可以使用纯HTML / CSS，或者这是否需要Javascript？

Answer 1

单独使用CSS是不可能的，但可以使用JavaScript制定解决方案。 ：d

Answer 2

简短回答：仅限CSS无法使用。

一点解释+ workaraound

media查询的设计不是针对特定元素，而是针对视口或设备本身的屏幕大小。因此，media查询只是不知道特定元素的大小。

要实现此效果，您必须超越纯CSS并使用一些JavaScript。一个非常有用的工具是https://github.com/marcj/css-element-queries，它是一个基于元素添加媒体查询的polyfill。它也是跨浏览器友好的（适用于IE8 +）。