Основные принципы адаптивного дизайна

внешний интерфейс Программа перевода самородков дизайн Отзывчивый дизайн
Основные принципы адаптивного дизайна

Основы адаптивного дизайна

Создание адаптивного дизайна пугает: он состоит из множества движущихся частей и часто не выстраивается так, как вы ожидаете; вы проектируете с учетом всех различных окон просмотра. Следуя этим основным принципам, вы сможете создавать более надежные и предсказуемые адаптивные дизайны.

Принцип № 1: Сохраняйте простоту области просмотра

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Принцип № 2: Mobile First

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

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

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

С Mobile First вы избежите многихне требуетсяCSS, чтобы сделать ваш CSS легче, а сайт быстрее.

Принцип № 3: Дизайн на основе контента

Вы можете использовать такие значения, как 320 пикселей, 375 пикселей, 768 пикселей и 1024 пикселей, в качестве контрольных точек. Они соответствуют ширине реального устройства. Это конструкция для конкретного устройства. Но когда новые устройства становятся более популярными(#375IsTheNew320), на этих новых устройствах ваш дизайн может выглядеть не очень хорошо.

Stephen Hay,Рабочий процесс адаптивного дизайнаАвтор , рекомендует начинать с маленького экрана, а потом "увеличивать ширину экрана до некрасивого, пора поставить точку останова!"

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

Эмпирическое правило: когда вам нужна ширина строки около 70 символов, это примерно равно (в зависимости от шрифта!) от 36 до 40em.

Принцип № 4: Используйте ems в медиа-запросах

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

Измените остальную часть вашего дизайна таким образом, чтобы сделать ваш сайт более надежным.

Принцип № 5: Минимальная или максимальная ширина, выберите только одну

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

Если все медиа-запросы работают «вверх» или «вниз», а ваш сайт выглядит не так, как ожидалось, при определенном размере, вы всегда знаете, где искать в коде. Написание CSS в новом медиа-запросе никогда не повлияет на размер экрана, который вы написали ранее. Вам просто нужно выяснить, какой медиа-запрос ниже (или выше) для обновления CSS.

Принцип № 6: Избегайте фиксированного размера

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

Попробуйте установить размеры элементов относительно их окружения. Используйте проценты или единицы области просмотра. избегать установкиwidthа такжеheight, попробуйте установить соответствующийmin-а такжеmax-. если вы найдетеwidthнанесли ущерб макету,max-width:100%Чудеса можно творить.

Принцип № 7: Используйте современные методы верстки

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

Every-layout.devВыше вы можете (повторно) узнать, как создавать общие макеты, используя макеты flexbox и grid. В нем перечислены некоторые распространенные макеты и объясняется, как их построить с использованием современных технологий.

Принцип № 8: Оставьте место для различий в рендеринге шрифтов

Заманчиво создать точку останова на неподходящей новой строке. Чтобы сделать его «идеальным по пикселям». Конечно, мы знаем, что сеть никогда не была «идеальной по пикселям».

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

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

Принцип № 9: Решайте в браузере

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

Вы можете создавать дизайны в инструменте дизайна, а также некоторые грубые адаптивные версии. Однако в вашем браузерепри работепрежде чем принять решение о переходе на другой дизайн. Монтажная область Sketch может иметь ширину 750 пикселей, но если вы обнаружите, что макет уже нормально работает при 44 em (эквивалентно 704 пикселям) в браузере, используйте 44 em в CSS.

Принцип № 10: Попробуйте Polypane

С Polypane создание веб-сайтов и приложений в первую очередь для мобильных устройств и контента становится естественным. Создайте свой самый маленький экран из маленькой панели. Затем добавьте новую панель и сделайте ее шире, пока она не станет «достаточно уродливой», как ее называет Стивен. Затем проверьте ширину панели и используйте ее.emзначение в качестве новой точки останова. Установите стиль, а затем продолжайте повторять, пока не закончите.

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

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории