Блог

Главная - Вопросы по программированию - CSS, Идиома для предпочтительной минимальной ширины

CSS, Идиома для предпочтительной минимальной ширины

#html #css

Вопрос:

Я извлек уроки из подобных вопросов , которые min-width всегда бьют max-width , что прискорбно, потому что я думаю, что современные веб-сайты в основном требуют обратного.

Мне часто приходится прибегать к медиа-запросам, чтобы решить приведенную ниже проблему, но я надеюсь, что есть элегантное/лучшее решение:

Скажи, что у меня есть div :

 <div>Words on a page. Words on a page. Words on a page. Words on a page.</div>

Я часто хочу, чтобы эта div ширина была не менее 500 пикселей, если она не превышает 90% ширины экрана. Это может быть достигнуто с помощью:

 div {
    min-width: 500px;
    max-width: 90vw;
}

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

Комментарии:

1. Похоже, вам нужен «отзывчивый дизайн». Для этого существуют всеобъемлющие, зрелые методы.

2. «Теперь проблема с вышеизложенным в том, что он никогда не расширяется более чем на 500 пикселей». — почему он должен быть с явно указанной шириной 500 пикселей? Похоже, вы действительно хотите min-width: 500px туда попасть — и я не понимаю, в чем должна быть проблема с этим? Что он не опускается ниже 500 пикселей, если ширина экрана этого не позволяет? Ну, это проблема, с которой вы столкнулись бы с обоими width и min-width одним и тем же способом, поэтому для меньшего разрешения экрана для этого потребуется запрос мультимедиа, чтобы установить другую (минимальную)ширину в любом случае.

3. @CBroe справедливый момент, я обновил его.

4. Я прочитал это немного по-другому. Для меня просто означает «не менее 500 пикселей, но не более 90% ширины экрана» width: 90vw . Потому что «по крайней мере 500 пикселей» может означать любую ширину вообще, как только вы добавите свое условие. Это звучит почти так, как будто ты действительно хочешь этого width: 90vw; max-width: *some upper bound*; .

5. Я думаю, что вам нужна фиксированная минимальная ширина, но зависящая от условия (и это условие-минимальная ширина экрана) — и основным инструментом для выражения таких условий являются просто медиа-запросы. Но, возможно, вы можете собрать что-то из min()/max (), что соответствует той же цели …? developer.mozilla.org/en-US/docs/Web/CSS/min()


Ответ №1:

Сделайте это, как показано ниже:

 div {
  min-width: min(500px, 100%); /* will take less than 500px if there is an overflow */
  max-width: 90vw;
  border:1px solid;
} 
 <div>Words on a page. Words on a page. Words on a page. Words on a page.</div>

Комментарии:

1. Боже мой, это идеально, я настроил его min-width: min(500px, 100%); width: fit-content; Давным-давно , когда впервые узнал о сетках, я пробовал min max и знакомился с элементами помимо сеток, но не получил никакой радости. Благодаря тому, что я увидел, как вы это сделали, я протолкнулся и обнаружил, что width: fit-контент является виновником. Мой сброс CSS устанавливает все дивы на 100%. Спасибо!!!

Ответ №2:

Вы хотите установить минимальную ширину не более 90% ширины экрана, но если экран достаточно широкий, то 500 пикселей.

Если да, то, может быть, попробуем:

 div {
  min-width: min(500px, 90vw);
  display: inline-block;
  background-color: lime;
} 
 <div>Some text </div>

Метки: ,