Выбираем между «min-width» и «max-width»

Довольно часто возникает вопрос, когда стоит использовать min-width, а когда max-width? Тем, для кого отзывчивый дизайн стал привычным делом, такой вопрос может показаться странным. И такие люди знают ответ: все зависит от ситуации . Но анализ исходников сайnов показывает, что многие дизайнеры и разработчики до сих пор не очень в этом уверены. В этой статье мы попробуем разобраться, что значит \"все зависит от ситуации\" в отношении конкретно этого вопроса.

Десктопные версии и max-width

Существует немалое количество дизайнеров/разработчиков, которые до сих пор считают своим основным направлением дизайна десктоп , а остальные (в основном меньшие) размеры экранов второстепенными; зачастую это отговорка, так как разработка для этой категории устройств требует значительно большего количества усилий, по сравнению с их десктопными конкурентами. Как правило, если исследовать CSS этих сайтов, в них в основном используется медиазапрос max-width.

В этом есть смысл. Если дизайн разработан в первую очередь для десктопов, тогда весь CSS пишется в соответствующем стиле, и нужно добавить еще большее количество CSS для любых других контрольных точек. Если заданная десктопная ширина является нашей исходной точкой, и мы не хотим или не можем рефакторить наш CSS, тогда кажется логичным переопределить то, что на данный момент является нашим базовым CSS для всех вариантов ширины экранов, оставив только те, которые нам нужны для меньших экранов.

Это может привести к ситуации, которую в шутку называют написание стилей только для того, чтобы потом их убрать . Вот неплохой пример (будем считать, что .related принимает форму боковой панели):

.content {
  width: 60%;
}
.related {
  width: 40%;
}
@media screen and (max-width: 37.4em) {
  .content,
  .related {
    width: 100%;
  }
}

Приведенный выше пример сильно упрощен, но достаточен, чтобы объяснить о чем идет речь. Данный подход, если в нем использовать слишком много компонентов, может существенно увеличить количество CSS, необходимого для завершения проекта. Но основная проблема заключается в том, что он нелогичен, потому что при условии, что блочные элементы занимают 100% их родительских элементов по умолчанию, следующий вариант имеет больше смысла:

@media screen and (min-width: 37.5em) {
  .content {
    width: 60%;
  }
  .related {
    width: 40%;
  }
}

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

Использование max-width вопреки здравому смыслу

Есть несколько причин, почему, даже если вы знаете, как сделать лучше, следует нарочно использовать поход с max-width, похожий на описанный выше:

1. Вы разработчик, и вы получили от дизайнера макеты только для десктопа , преимущественно для десктопа или для других размеров в качестве отмазки . Если перед вами стоит задача создать сайт только для десктопных экранов, этим и занимайтесь. Если у вас есть довольно привлекательный десктопный дизайн с несколькими примерами мобильных устройств или планшетов, этим и занимайтесь. В таких случаях, пользуйтесь max-width, если только у вас нет бюджета и/или времени, чтобы рефакторить дизайн в процессе разработки.
   
   1. Вы делаете отличный сайт отзывчивым, и имеющийся CSS это ваш груз, который вы получили и не можете изменять по каким бы то ни было причинам.
      
   2. Вы пытаетесь компенсировать тот факт, что на данный момент у нас нет запросов элементов, и пытаетесь справиться с этим с помощью CSS вместо того, чтобы использовать полифил JavaScript для несуществующих спецификаций.

Так что же лучше использовать?

Посмотрите на стандартную форму отображения заданного элемента. Если вам нужно переопределить такое стандартное значение ради меньших экранов, используйте max-width. Если стандартное значение можно использовать на малых экрана, используйте min-width, но только если элемент должен отклоняться от значения по умолчанию. И, конечно же, стоит позволить контенту определять, где это должно происходить.

Хороший пример использования max-width для переопределения стандартной формы отображения элемента, чтобы это смотрелось лучше на меньших экранах это использование планшетов. Представьте себе таблицу, содержащую слишком много контента, чтобы его можно было отображать в стандартной форме на малом экране. Вот один из возможных подходов:

@media only screen and (max-width: 30em) {
  .big-table tr,
  .big-table td {
    display: block;
  }
}

На маленьком экране это превращает каждую строку (и ячейку) в блок. Таблица может стать довольно длинной вертикально, и потребуется больше оформления, но это лучше, чем скролить туда-сюда в горизонтальной плоскости, чтобы иметь возможность увидеть весь контент.

В данном случае, имеет смысл оставить таблицу в стандартном виде, за исключением браузеров, которые распознают медиазапросы, и когда экран не более 30em (в приведенном примере).

Прочие элементы (возможно даже большинство элементов), имеющие стандартный формат, который неплохо работает на небольших экранах, должны изменяться, только если это необходимо на больших экранах. Тогда лучше использовать min-width.

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