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

Question

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

• 它的内容大小
• 但只能通过固定增量 - 例如,150px,300px,450px等.

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

这可能与纯HTML/CSS,或这是否需要Javascript？

Answer 1

简短的回答：它不能仅与 CSS 一起使用。

一点解释+解决方法

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

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