Минимальная ширина CSS и процент

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

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

У меня есть

section{ 
    min-width: 100%; 
}

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

источник

2016-10-19 Aschab

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

section { 
    min-width: 600px; 
}

это автоматически 100%, с минимумом 600px.

источник

2016-10-19 15:36:33

Perfect. Идеальный ответ, –

Просто укажите 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>

источник

2016-10-19 15:33:11

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

width: 100% 
max-width: 600px;

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

PS: Вы писали

Так что, если окно просмотра меньше чем 600px ширина его 600px

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

источник

2016-10-19 15:33:14 Johannes

Мне также интересно, если бы OP означало 100% до 600 пикселей, ха-ха. –

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

Минимальная ширина CSS и процент

ответ

Смежные вопросы