Question

我希望div在视口宽度较小时最大化尺寸，并在视口宽度较大时减小尺寸（最大）。

如何实现？

＆＃13;

.outer {
  outline: 1px solid red;
  height: 128px;
  min-width: 50%;
  /* width: ???; What to set here to achieve the effect? */
  margin: auto;
}

＆＃13;

<div class="outer">
</div>

＆＃13;

我尝试修改填充而不是宽度，但它仍然与将宽度设置为％值的效果相同。

＆＃13;

.outer {
  outline: 1px solid red;
  height: 128px;
  width: 100%;
  padding: 0 10vw;
}

＆＃13;

<div class="outer">
</div>

＆＃13;

Answer 1

你可以按照width: calc(500px - 20vw)的方式做点什么。当窗口很小时，vw将最小（创建更大的值），反之则发生在一个大窗口中。

Answer 2

您可以使用CSS3 @media查询。请检查以下内容：

<html>
    <head>
        <style>
            @media (min-width: 600px) {
                .outer {
                outline: 1px solid red;
                height: 128px;
                max-width: 50%;
                margin: auto;
                }
            }
            @media (max-width: 600px) {
                .outer {
                outline: 1px solid red;
                height: 128px;
                width: 100%;
                margin: auto;
                }
            }
        </style>
    </head>
    <body>
        <div class="outer">
        </div>
    </body>
</html>

在较大的父宽度上减小div宽度

2 个答案: