Max-Width против Min-Width
большинство учебников, которые я читаю по использованию медиа-запросов, демонстрируют использование min-width, но я редко вижу людей, используя max-width.
это какая-то тенденция дизайна или шаблон, почему люди используют min-width над max-width?
например, я разрабатываю сайт, начиная с мобильного, работая до рабочего стола. Я использую Foundation 4, но используя медиа-запросы для удаления различных элементов на странице и переместите источник порядок.
одна вещь, с которой я сталкиваюсь, - это пользовательская навигация для любого устройства, ширина которого составляет 360px или меньше. Я хочу, чтобы у них была вертикальная навигация, а не встроенная горизонтальная. Поэтому моей идеей было использовать max-width предназначаться для этих устройств.
должен ли я использовать min-width вместо этого, если я сначала разрабатываю мобильный? Т. е. все стили по умолчанию для мобильных устройств, и таким образом, используя min-width для постепенного улучшения макета?
6 ответов
это действительно зависит от стиля работы. Например:
@media screen and (min-width:100px) {
body { font-weight:bold; }
}
@media screen and (min-width:200px) {
body { color:#555; }
}
вышеупомянутые два медиа-запроса сделают body шрифт полужирный, если экран больше или равен 100px, но и цвет #555 если он больше или равен 200px;
еще пример:
@media screen and (max-width:100px) {
body { font-weight:bold; }
}
@media screen and (max-width:200px) {
body { color:#555; }
}
в отличие от первого примера, это делает body шрифт полужирный и цвет #555 только если ширина экрана между 0 и 100px. Если это между 0px и 200px это будет цвет #555.
красота медиа-запросов заключается в том, что вы можете комбинировать эти утверждения:
@media screen and (min-width:100px) and (max-width:200px) {
body { font-weight:bold; color:#555; }
}
в этом примере вы ориентируетесь только на устройства с шириной между 100px и 200px - не более и не менее.
короче, если вы хотите, чтобы ваши стили к утечка из медиа-запросов вы бы использовали либо min-width или max-width, но если вы хотите повлиять на очень конкретный критерии можно просто комбинировать.
2 Часть Ответы
Часть 1: ответить " почему люди используют min-width над max-width?":
Это связано с потоком дизайн. Как правило, с шаблонами минимальной ширины вы разрабатываете mobile-first. С шаблонами максимальной ширины вы сначала разрабатываете рабочий стол.
Going mobile-first с минимальной шириной, стиль по умолчанию является мобильным стилем. Запросы после этого постепенно увеличиваются экраны.
body {
/* default styles here,
targets mobile first */
}
@media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
@media screen and (min-width:800px) {
/* And even larger */
}
и наоборот, используя max-width, сначала рабочий стол добавляет запросы, чтобы сделать стили мобильными
body {
/* default styles here,
targets desktops first */
}
@media screen and (max-width:800px) {
/* style changes when the screen gets smaller */
}
@media screen and (max-width:480px) {
/* And even smaller */
}
Часть 2: для вашей конкретной пользовательской навигации для любого устройства, ширина которого составляет 360px или меньше:
вы можете включить это как отдельный запрос максимальной ширины, если это единственное исключение из правила. Или используйте этот стиль в качестве базовой линии, а затем измените его для более широких экранов.
Если вы делаете исключение (которое на самом деле не следует мобильным первым методам дизайна), это было бы что-то вроде:
body {
/* default styles here,
targets mobile first
ALSO will cover 361 - 479 width */
}
@media screen and (max-width:360px) {
/* style ONLY for screens with 360px or less width */
}
@media screen and (min-width:480px) {
/* style changes when the screen gets larger */
}
etc...
короче говоря, min-width-это мобильный 1-й подход, max-width-это настольный 1-й подход.
Min-width-минимальная ширина, при которой стиль начнет применяться. (Должны быть заказаны от самого маленького до самого большого, чтобы работать правильно, сначала регулярные стили). Иными словами, если ширина устройства больше или равна..., затем примените определенные стили. С min-width стили начинаются и продолжаются вечно, пока min-width выполняется, а max-width отсутствует указанный.
Max-width-максимальная ширина, при которой стиль будет продолжать применяться. После этого стиль перестанет применяться. (Должны быть заказаны от самого большого до самого маленького, чтобы работать правильно, сначала регулярные стили). Иными словами, если ширина устройства меньше или равен..., затем применить определенные стили. Стили останавливаются, как только ширина больше максимальной ширины.
наконец, это зависит от того, как вы хотите реализовать. Нет ни одного правильного решения, как некоторые могут претензия. На мой взгляд, min-width отлично работает при запуске с нуля, но max-width часто имеет больше смысла для меня при модернизации существующего веб-сайта.
сначала у меня был невосприимчивый веб-сайт, предназначенный для настольных компьютеров. Затем добавлена отзывчивость путем добавления медиа-запросов max-width.
мой сайт теперь имеет макеты для 320px, 480px, 768px, 960px и 1024px и т. д. широкие устройства, и поэтому я добавил медиа-запросы, которые выглядят как max-width: 479px, max-width: 767px, max-width: 959px etc. Это прекрасно работает - сайт ведет себя так, как должен.
однако недавно я обнаружил, что инструменты разработчика Chrome "режим устройства" имеют инструмент медиа-запросов, который действительно, очень полезно для меня. Это позволяет мне щелкнуть, чтобы отобразить веб-сайт на каждом уровне медиа-запроса, который Chrome находит на моей странице. Это большая помощь для меня при разработке адаптивных макетов.
инструмент медиа-запросов использует числа, которые он находит в медиа-запросах, т. е. 479, 767, 959, 1023 и т. д. Но это означает, что, например, если я хочу увидеть, как выглядит мой макет для устройства шириной 480px, я должен щелкнуть медиа-запрос уровня max-width 767px, который для меня довольно неинтуитивно.
Это заставило меня переосмыслить мой текущий рабочий стол-первый CSS, и я буду переписывать свой CSS с помощью мобильного первого подхода.
Я думаю, что мобильный первый CSS с помощью min-width будет гораздо более читабельным, потому что вы увидите медиа-запрос для min-width: 480px и знайте, что это будет CSS для устройства шириной 480px.
потому что вы разрабатываете веб-сайт, начиная с мобильного дизайна и увеличивая сложность с разрешением, я бы посоветовал пойти с min-width потому что это следует той же схеме работы.
технически min-width является "мобильным первым" в том смысле, что вы обычно начинаете разработку для мобильных устройств и добавляете больше сложности по мере увеличения разрешения.
тем не менее, термин приобрел популярность больше, чем его альтернативное значение, которое в целом стало подразумевать больше о повышении внимания к мобильным усилиям и приоритизации (в основном подпитывается клиентами или руководством, которые не понимают технический вывод). Вероятно, поэтому вы в конечном итоге видите много min-width примеры онлайн (модные блогеры пишут о модных темах).
когда я работаю со сложными дизайнами рабочего стола, мне лично легче писать max-width запросы, чтобы" упростить уравнение", так сказать. Но используя max-width запросы не мешает вам сосредоточиться на мобильных и все еще может быть полностью частью стратегии "mobile first".
в любом случае, самое главное-это системность. Используйте один и придерживайтесь его для этого проекта. Проект может стать очень запутанным, если он использует оба.
в качестве заключительного замечания, используя меньше запросов, когда это возможно, идеально. Это может быть достигнуто благодаря хорошему адаптивному дизайну.
большинство сайтов, над которыми я работал, предназначены для рабочего стола, и в этих случаях используют max-width запросы имеет смысл. Как правило, если вы запускаете маленький экран, сначала используйте min-width а затем построить сверху с медиа-запросов, ориентированных на большие разрешения.
вы можете, конечно, смешивать как min и max запросы, чтобы получить конкретные разрешения
возможно, посмотрите на использование min-device-width для конкретной проблемы, которую вы имеете с навигацией