CSS最小宽度固定和百分比

I'm wondering if I can have a section to have min width both as percentage and a fixed amount. Let me be more clear, I have the following html:

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

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

I have

section{
    min-width: 100%;
}

Is there a way to have min-width as both: 100% and 600px? So that if the viewport is less than 600px the width its 600px and if its more the min-width its 100%? (It can be more because of content)

有没有办法让min-width同时为:100%和600px?因此,如果视口小于600px宽度为600px,如果它的最小宽度为100%? (因为内容可能更多)

3 个解决方案

#1

You only have to do this:

你只需要这样做:

section {
    min-width: 600px;
}

it is automatically 100%, with a minimum of 600px.

它自动100%,最小600px。

#2

The usual way is a bit different. You define for example:

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

width: 100%
max-width: 600px;

That way it will have the full width in smaller viewports, but never grow beyond 600px

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

P.S.: You wrote

P.S。:你写的

So that if the viewport is less than 600px the width its 600px

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

That way it would be wider than the viewport on smaller screens - I suppose this isn't what you want, is it?

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

#3

Just specify a width: 600px; with your min-width and you should get what you're looking for.

只需指定宽度:600px;你的最小宽度你应该得到你想要的东西。

This will make the section's 100% when the width is greater than 600px, and 600px when it is less than 600px, which is what you requested.

这将使宽度大于600px时的截面为100%,当小于600px时为600px,这是您所要求的。

CSS

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

JSFiddle

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

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

#1