Макс. Ширина по сравнению с минимальной шириной

Ответ 1

Это действительно зависит от того, как работает ваша таблица стилей. Например:

@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 до 100 пикселей. Если между 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

2 Part Answer

Часть 1: Чтобы ответить "почему люди используют минимальную ширину над максимальной шириной?":

Это связано с потоком дизайна. Как правило, с шаблонами с минимальной шириной вы сначала разрабатываете мобильные устройства. С шаблонами макс-ширины вы разрабатываете рабочий стол в первую очередь.

Переход на мобильный сначала с минимальной шириной, стиль по умолчанию - это мобильный стиль. Запросы после этого затем нацеливают постепенно большие экраны.

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. Для вашей конкретной навигации для любого устройства, ширина которого составляет 360 пикселей или меньше:

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

Если вы делаете исключение (которое на самом деле не соответствует методам проектирования мобильных устройств), это будет примерно так:

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...

Ответ 3

Короче говоря, min-width является мобильным 1-м подходом, max-width является настольным 1-м подходом.

Минимальная ширина - это минимальная ширина, на которой стиль будет применяться START. (Приходится заказывать от самого маленького до самого большого, чтобы нормально работать, сначала обычные стили). Другими словами: если ширина устройства больше или равна..., примените некоторые конкретные стили. С минимальной шириной стили START и продолжаются вечно до тех пор, пока выполняется минимальная ширина, и максимальная ширина не указана.

Максимальная ширина - это максимальная ширина, при которой стиль будет продолжать применяться. После этого стиль будет использоваться STOP. (Приходится заказывать от самого большого до самого маленького, чтобы работать должным образом, обычные стили сначала). Иными словами: если ширина устройства меньше или равна..., примените специальные стили. Стили STOP, как только будет достигнута ширина, превышающая максимальную ширину.

Наконец, это зависит от того, как вы хотите реализовать. По мнению некоторых, нет решения ONE RIGHT. На мой взгляд, min-width отлично работает при запуске с нуля, но max-width часто имеет для меня больше смысла при обновлении существующего веб-сайта.

Ответ 4

Сначала у меня был веб-сайт, отвечающий за не отвечающий требованиям, предназначенный для настольных компьютеров. Затем добавили отзывчивость, добавив запросы максимальной ширины.

У моего сайта теперь есть макеты для 320px, 480px, 768px, 960px и 1024px и т.д. Широкие устройства, поэтому я добавил медиа-запросы, которые выглядят как max-width: 479px, max-width: 767px, max-width: 959px и т.д. Это прекрасно работает - сайт ведет себя так, как должен.

Однако недавно я обнаружил, что в "режиме устройства" Chrome Developer Tools есть инструмент Media Queries, который действительно полезен для меня. Это позволяет мне щелкнуть, чтобы отобразить веб-сайт на каждом уровне медиа-запросов, который обнаружит Chrome на моей странице. Это очень помогает мне при разработке адаптивных макетов.

Инструмент Media Queries Tool использует числа, которые он находит в медиа-запросах, то есть 479, 767, 959, 1023 и т.д. Но это означает, что, например, если я хочу посмотреть, как мой макет для устройства шириной 480 пикселей выглядит, я должен щелкнуть медиа-запрос максимальной ширины 767px, что для меня совершенно неинтуитивно.

Это заставило меня переосмыслить мой текущий рабочий стол с CSS, и я буду переписывать свой CSS с использованием мобильного подхода.

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

Ответ 5

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

Технически, min-width является "мобильным первым" в том смысле, что вы обычно начинаете развиваться для мобильных устройств и добавляете больше сложности по мере увеличения разрешения.

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

Когда я работаю со сложными проектами рабочего стола, мне лично легче написать max-width запросы для "упрощения уравнения" так сказать. Но использование запросов max-width не мешает вам сосредоточиться на мобильных устройствах и все еще может быть полностью частью "мобильной первой" стратегии.

В любом случае, самое главное - это последовательность. Используйте один и придерживайтесь его для этого проекта. Проект может стать очень запутанным, если он использует оба.

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

Ответ 6

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

Вы можете, конечно, смешивать минимальные и минимальные запросы для получения конкретных разрешений

Возможно, посмотрите на использование min-device-width для конкретной проблемы, имеющейся у вас при навигации.