Question

我想知道我是否可以让一个部分的最小宽度为百分比和固定数量。让我更清楚，我有以下html：

<body>
<main>
    <section id="home-section">
        ...Content...
    </section>
    <section id="team-section">
        ...Content...
    </section>
</main>
</body>

我有

section{
    min-width: 100%;
}

有没有办法让min-width同时为：100％和600px？因此，如果视口小于600px宽度为600px，如果它的最小宽度为100％？（可能更多是因为内容）

Answer 1

你只需要这样做：

section {
    min-width: 600px;
}

它自动为100％，最小为600px。

Answer 2

通常的方式有点不同。您可以定义例如：

width: 100%
max-width: 600px;

这样它将在较小的视口中具有全宽，但永远不会超过600px

P.S。：你写了

因此，如果视口的宽度小于600px，则为600px

那样它会比小屏幕上的视口更宽 - 我想这不是你想要的，不是吗？

Answer 3

只需使用width: 600px;指定min-width即可获得您正在寻找的内容。

当宽度大于600px时，这将使该部分为100％;当小于600px时，这将使该部分为100px，这就是您所要求的。

<强> CSS

section {
    min-width: 100%;
    width: 600px;
}

<强> JSFiddle

＆＃13;

section {
    min-width: 100%;
    width: 600px;
    background-color: yellow;
}

＆＃13;

<main>
    <section id="home-section">
        ...Content...
    </section>
    <section id="team-section">
        ...Content...
    </section>
</main>

＆＃13;

CSS最小宽度固定和百分比

3 个答案: