javascript - 为一个元素指定多个最大宽度值

Question

我有一个元素永远不能大于容器宽度的 90%并且永远不能超过 800 像素的绝对宽度。

使用 CSS 我可以指定其中之一

#element {
    max-width: 90%;
}

或

#element {
    max-width: 800px;
}

不幸的是，我不知道这样的语法

#element {
    max-width: 90% 800px;
}

或

#element {
    max-width: max(90%, 800px);
}

哪个有用。

有没有办法只使用 CSS 来解决这个问题？我想在这里避免使用 JavaScript。

我已经找到了this topic ，不幸的是，这对我不起作用。

Answer 1

你可以使用:

#element {
    width: 90%;
    max-width: 800px;
}

这样 #element 的 width 将始终恰好是父级的 90% 如果它低于 800px 或 800px 否则。

或者，根据您要执行的操作，您应该使用 media queries或包装元素。