HTML:如何将元素宽度设置为 (a) 屏幕宽度或 (b) 以像素为单位的某个尺寸中的最小值？

Question

我想制作一个 400 像素宽的元素，如果它适合屏幕，否则就给它整个屏幕的宽度。

所以我不希望元素溢出到屏幕之外。

我该怎么做呢？

我试过将 max-width 设置为 400px，这部分有效，但它(当然)没有设置初始大小。如果我也把 width=100% 放在上面，我会注意到当我在某个点缩小窗口时，元素开始(稍微)溢出屏幕 - 它不会只设置最大宽度。

Answer 1

要设置宽度和最大宽度，您可以执行以下操作:

element {
    width: 100%;
    max-width: 400px;
{

这会将您的元素的默认宽度设置为父元素的 100%，但会将宽度限制在 400 像素。需要注意的一件事是，这将使元素宽度成为元素父元素的 100%。不是窗口。