Как эффективно использовать медиа-запросы?

Question

Теперь я понимаю, как работают «точки останова» - когда окно браузера достигает определенной ширины, элемент внутри запросов изменяется. Теперь, вот мой вопрос:

Если я начинаю разрабатывать веб-сайт и начинаю добавлять стили для того, как я хочу смотреть на мобильном устройстве, когда дизайн закончен, и я хочу расширить его, то какой эффективный способ на это? На данный момент все, что я могу придумать, это добавить запросы с более высокой точкой останова min-width, а затем вставить CSS из кода, который я уже сделал, и начать делать изменения соответственно в рамках запросов. У меня есть сильное чувство, что это неправильный способ делать что-то, поэтому я прошу о помощи. Благодаря!

Answer 1

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

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

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

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

навигации пример бар:

.navigation-bar-container { 
    position: relative; 
    width: 100%; 
    min-width: 320px; 
    max-width: 100%; 
    height: 100px; 
} 

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

Минимальная ширина: 320px, потому что самый маленький экран, который вам нужно поддерживать, может быть 320px широко (iPhone любой), поэтому нет необходимости сжимать свой элемент ниже этого.

Максимальная ширина интересна. В настоящее время максимальная ширина навигационного бара составляет 100%, потому что я сказал, что это ... нет, это не имеет никакого смысла. Почему это на 100%? Это потому, что я хочу, чтобы он всегда расширялся до полной ширины экрана, независимо от ширины экрана. Это поведение по умолчанию.

Теперь попробуйте подумать о том, что произойдет с шириной панели навигации, когда вы находитесь в разных размерах экрана, например мобильных устройствах. Что будет с элементами, они будут сжиматься вместе с вашим контейнером? Будут ли они даже соответствовать, когда размер экрана слишком мал? Введите медиа-запросы.

• Полные ширины рабочего стола: приблизительно 769px или выше ... это может быть изменено, конечно.

Максимальная ширина составляет 100%, а ширина 100% означает, что она будет регулироваться независимо от размера экрана. По умолчанию поведение делает свое дело, да!

• Таблетка: примерно 421px к 768px ... это при условии изменения курса

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

@media screen and (max-width: 768px) { 
    .navigation-bar-container { 
     display: none; 
    } 

    .sliding-navbar-container { 
     display: block; 
     position: absolute; 
     height: 100%; 
     left: 0; 
     top: 0; 
     width: 320px; 
    } 
} 

Да я не сделал им соответствовать вообще. Я поменял старый старый navigation-bar-container шириной другой. Классический пример того, что хорошо и безопасно при использовании медиа-запросов. Вместо того, чтобы ломать голову над тем, как подходить к этим элементам, не стесняйтесь, мой друг, просто поменяйте навигационную панель на другую, которая будет работать на небольших устройствах там.

Обратите внимание, что новая навигационная панель фактически учитывает ее ширину 320px, она будет располагаться абсолютно в верхней и левой части экрана, делая там хорошую работу. Как заставить его вставлять и выходить, всплывать, выглядеть аккуратно - это еще один вопрос! Не спрашивайте, если вам любопытно ... вернуться к медиа-запросам!

Однако, если мы говорим об элементе, который изменится, допустим, он всегда занимает 100 процентов от ширины экрана, а затем сокращается, чтобы занять половину ширины экрана только для планшетных/ландшафтных телефонных устройств, тогда вы можете захотеть для использования медиа-запроса типа:

@media screen and (min-width: 421px) and (max-width: 768px) { 
    max-width: 50%; 
} 

Очень маленькое и простое изменение. Максимальная ширина интересна тем, что она контролирует вашу внутреннюю ширину, которая по умолчанию установлена ​​на 100%. Это изменение заставит ваш элемент отрегулировать до 50% ширины экрана при изменении размера, чтобы отрегулировать до 100% новой ширины элемента. Также было бы неплохо сделать это max-width: 50vw, так как он будет регулировать ширину видового экрана , тем самым делая его отзывчивым даже при работе с широко различными видовыми экранами.

Итак, мы пришли к выводу, наш TLDR:

• Использование в качестве маленьких размеров медиа-запросов, как вам нужно, потому что если вам нужно много, то вы делаете это неправильно, серьезно!
• Если вам нужно много, не можете этого избежать, узнайте Bootstrap, позвольте другим людям беспокоиться о ночных кошмарах в средствах массовой информации.
• Подумайте в контейнерах, ваши элементы будут сидеть и перемещаться в них. Подумайте, как эти контейнеры будут течь с рабочего стола на мобильный и наоборот. Понимание этой мысли имеет решающее значение, поскольку оно является источником вашего реагирующего поведения и должно быть в центре внимания ваших медиа-запросов.
• Несмотря на то, что здесь не рассматриваются, вы можете легко просмотреть медиа-запросы и примеры шрифтов/изображений. Ответственные шрифты и изображения являются важной частью вашего контента, и они как таковые должны учитываться медиа-запросами. Изменение фонового изображения, лучшая читаемость в зависимости от устройства, на котором вы находитесь, все это имеет значение и может быть упрощено с помощью мультимедийных запросов.
• Я положил это последним здесь, потому что ITT MATTERS A LOT использовать SASS/SCSS и сэкономить массу проблем при работе со средствами массовой информации (и всего CSS). Посмотрите на mixins, variables, partials, которые вы можете использовать по медиа-запросам. Вам понравится, если вы не знаете об этом и начнете использовать его сейчас.
• Нужна больше? Fine enjoy Google's responsive web design fundamentals

Удачи !!!