Question

我有一个div，通常设置占据页面宽度的20％，但是，在这个20％不足以显示其内容而没有溢出的页面上，我希望它能够占用适合内容所需的最小宽度。内容不一定是固定宽度的，因此我不能简单地使用带有硬编码值的min-width。

如果可能的话，我想用纯CSS做到这一点。

Answer 1

所以，我建议定义断点。所以你必须弄清楚你的宽度不够，并使用媒体查询来覆盖CSS规则以适应不同的情况。

如果您的页面因屏幕宽度小于720px而中断，那么您可以执行此类操作：

@media screen and (max-width: 720px) {
    /* ... */
}

然后，您可以在此媒体查询中定义新的width或min-width。