<aside> 💡 待填坑,有时间来研究一下 CSS contain 和 container

</aside>

目的是为了可以使用 @container 来制作一个响应式的容器。

有两个属性

container-namecontainer-type。前者可以在查询时加上名字,后者可以指定 response size 的方向,inline 就是文字增长的方向,box 垂直于 inline。

inline-size 和 box-size 是相对于文本方向的 width 和 height。属于 logical properties

Ref:

CSS container queries - CSS: Cascading Style Sheets | MDN