CSS фиксированная минимальная ширина и процент

#html #css

#HTML #css

Вопрос:

Мне интересно, могу ли я иметь раздел с минимальной шириной как в процентах, так и в фиксированной сумме. Позвольте мне быть более ясным, у меня есть следующий html:

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

У меня есть

 section{
    min-width: 100%;
}

Есть ли способ иметь минимальную ширину как 100%, так и 600 пикселей?
Так что, если окно просмотра меньше 600 пикселей, ширина составляет 600 пикселей, а если больше, минимальная ширина составляет 100%? (Это может быть больше из-за содержимого)

Ответ №1:

Вам нужно только сделать это:

 section {
    min-width: 600px;
}

это автоматически 100%, с минимальным разрешением 600 пикселей.

Ответ №2:

Обычный способ немного отличается. Вы определяете, например:

 width: 100%
max-width: 600px;

Таким образом, он будет иметь полную ширину в меньших видовых экранах, но никогда не будет превышать 600 пикселей

Постскриптум: Вы написали

Так что, если окно просмотра меньше 600 пикселей, ширина составляет 600 пикселей

Таким образом, он будет шире, чем окно просмотра на меньших экранах — я полагаю, это не то, что вы хотите, не так ли?

1. Мне также любопытно, означал ли OP 100% при 600px, ха-ха.

2. Нет, я имел в виду это правильно, я имел в виду окно просмотра размером менее 600 пикселей, с разрешением 600 пикселей, длиннее текущего окна просмотра

Ответ №3:

Просто укажите width: 600px; в своем min-width , и вы должны получить то, что ищете.

Это сделает раздел 100%, когда ширина больше 600 пикселей, и 600 пикселей, когда она меньше 600 пикселей, что вы и просили.

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>