Прежде чем вы потратите слишком много времени на обдумывание точных разрешений монитора для вашего дизайна, вы должны помнить, что весь современный веб-дизайн адаптивен, то есть он спроектирован так, чтобы адаптироваться к различным разрешения экрана. Благодаря единому дизайну вам необходимо поддерживать все, от самых маленьких мобильных экранов до настольных мониторов Ultra HD.
С участием адаптивный веб-дизайн, вы устанавливаете более общие макеты для мобильных устройств, планшетов и компьютеров. Когда и как каждый элемент страницы перемещается на место для этих макетов, определяется специальными точками останова, записанными в ваш CSS. Эти точки останова определяются определенными общими разрешениями экрана.
Хотя вы не будете нацеливаться на конкретные разрешения или устанавливать фиксированный размер для своих дизайнов, вы рассмотрите возможность использования экрана разрешений в установлении точек останова и создании плавных переходов, чтобы ваш сайт хорошо выглядел на всех устройствах и Размер экрана.
Общие разрешения рабочего стола
- 1280x720 Стандартный HD - Возможно, вы знаете это лучше как 720p. Это было стандартное разрешение HD, когда HD впервые стало обычным явлением. Вы, вероятно, не найдете много новых мониторов, использующих это разрешение, но их много еще в дикой природе, когда они были более популярными.
- 1366x768 - Это что-то необычное, но очень популярное в небольших ноутбуках и некоторых планшетах. Если вы имеете дело с низкокачественным Chromebook, есть большая вероятность, что это разрешение, на которое вы нацеливаетесь.
- 1920x1080 Наиболее распространенные - Когда вы думаете о настольных компьютерах, вы, вероятно, имеете дело с разрешением 1920x1080, более известным как 1080p. Эта резолюция есть абсолютно везде. Большинство настольных мониторов по-прежнему имеют разрешение 1080p, и многие полноразмерные ноутбуки тоже. Вы также найдете приличную долю планшетов с разрешением 1080p в пейзаже.
- 2560x1440 - 1440p - еще одна странная золотая середина в разрешении монитора. Это выше, чем то, что вы считаете 2k, но это не совсем 4k. Тем не менее, это обычное разрешение на рынке игровых мониторов, и это доступная альтернатива полноценному 4k. В зависимости от вашего сайта поддержка 1440p может стоить или не стоить.
- 3840x2160 Ближайшее будущее - Это Full 4K или Ultra HD. В то время как 4k обычно зарезервировано для ПК более высокого класса, цены падают, графические технологии улучшаются, а спрос на 4k определяется рынком телевизоров, где он гораздо более распространен. Можно с уверенностью предположить, что в ближайшие несколько лет 4k легко превзойдет 1080p в качестве стандарта де-факто, поэтому сейчас определенно стоит учитывать 4k.
Стандартные разрешения планшета / альбомной ориентации
Планшеты могут быть не такими популярными, как раньше, и увеличение размеров телефонов в сочетании с трансформируемыми ноутбуками, похоже, значительно сократило их долю на рынке. Тем не менее, учет разрешений планшетов в значительной степени совпадает с учетом настольных компьютеров и ноутбуков. Вы можете использовать точки останова на планшете для создания точек останова для определенных проблемных элементов, которые не подходят для определенных разрешений.
- Вы также обязательно должны учитывать разрешение планшета для устройств, находящихся в портретном режиме. Не все будут просматривать на своем планшете в альбомной ориентации, поэтому вам следует добавить хотя бы одну точку останова для обычного планшета в портретной ориентации.
- 1280x800 Разрешение, которое раньше было обычным - Старые планшеты, планшеты более низкого уровня и планшеты меньшего размера, как правило, имеют некоторые планшеты Amazon Fire, также все еще используют разрешение 1280x800. Это одно из последних действительно мобильных разрешений на планшетах.
- 1920x1200 Обычное для планшетов с диагональю 7 и 8 дюймов - В альбомной ориентации большую часть времени вы можете полагаться на те же точки останова, что и 1080p. Однако когда вы видите один из них на ландшафте, ситуация совсем иная. Такое разрешение характерно для множества 7- и 8-дюймовых планшетов, включая Amazon Fire.
- 2048x1536 Apple, планшеты -Это наиболее распространенное разрешение планшетов Apple. Он достаточно похож на 1440p, чтобы не иметь большого значения, но опять же, портрет необычный. В любом случае рекомендуется протестировать свой сайт в этом разрешении, чтобы убедиться, что на iPad ничего странного не происходит.
Планшеты с более высоким разрешением начинают проникать на территорию настольных компьютеров. В большинстве случаев вам даже не нужно их учитывать, потому что разрешение попадает в диапазон, который вы уже учли. Однако всегда полезно протестировать, чтобы быть абсолютно уверенным.
Стандартные разрешения для мобильных устройств
Мобильные устройства - самые сложные в обращении. Существует такой широкий спектр устройств, в том числе старые, которые все еще используются, что нелегко охватить их все. Вот почему так популярен дизайн, ориентированный на мобильные устройства. Философия проста. Сначала начните с простейшего мобильного дизайна и используйте его для больших и больших экранов. Таким образом, работают даже самые старые и маленькие устройства, но с меньшим количеством контента и меньшим количеством функций. Сайт не скован, он просто отображает в первую очередь только самую важную и часто используемую информацию.
Вот интересный трюк для работы с телефонами; переверните разрешение рабочего стола на бок. Конечно, есть необычные выбросы, но большинство современных телефонов следуют этому шаблону.
- 720x1280 часто встречается на старых устройствах - В течение ряда лет 720p, перевернутое на бок, было самым распространенным стандартом для мобильных устройств. В этом случае вам не нужно беспокоиться о ландшафтном режиме, поскольку он такой же, как на рабочем столе 720p. Просто закройте портретное разрешение шириной 720 пикселей.
- 1080x1920 золотая середина - 1080p уже очень давно является стандартом. Это все еще очень распространено на устройствах среднего уровня. Если вы собираетесь поддерживать только одно мобильное разрешение, то вот оно.
- 1440x2560 ток топовый - Мобильные устройства становятся все больше, а разрешение экранов становится все выше и выше. 1440p - интересный стандарт, потому что существует множество значений ширины экрана (в данном случае длины), которые попадают в этот диапазон. Как на настольных компьютерах, так и на мобильных устройствах самый распространенный - 1440x2560. Это дает экрану обычное соотношение сторон 16: 9. На мобильных устройствах это имеет немного меньшее значение, чем на настольных компьютерах, потому что длина устройства не сильно влияет на ваш дизайн.
Прежде чем вы с радостью будете поддерживать только три разрешения для мобильных устройств, вы также должны понимать, что некоторые люди используют до смешного старые телефоны с крошечными экранами. Вы всегда должны использовать минимальное минимальное разрешение, чтобы ваш сайт выглядел хорошо даже для тех, кто пользуется телефоном несколько лет назад.
Простые советы, которые нужно помнить
Легко взять кучу фактов о разрешениях экрана, текущем потоке и приступить к созданию макетов дизайна, и именно тогда у вас возникнут проблемы. При разработке веб-сайта следует помнить о нескольких ключевых идеях, и они верны в большинстве, если не во всех, ситуациях.
- Адаптивный дизайн плавный - Вы можете почувствовать склонность встроить в свой CSS огромный массив точек останова, чтобы учесть все возможные размеры экрана и ситуации. Это отличный способ свести себя с ума. Адаптивный веб-дизайн должен быть достаточно гибким, чтобы заполнять пробелы и неровности. Если вы обнаружите, что определяете слишком много статических чисел, будь то в медиа-запросах или для самих элементов, вы, вероятно, идете по неправильному пути.
- Люди не всегда максимизируют свой браузер - Этот вид идет рука об руку с предыдущим пунктом. Ты можешь дизайн для размеров экрана, но когда кто-то не раскрывает окно браузера до максимума, все это уходит в дым. Сохраняя гибкость дизайна, вы можете избежать проблем с разными размерами окон браузера.
- Проверить все - Попробуйте взломать свой сайт. Это единственный способ найти все ошибки и несоответствия, которые испортят впечатление посетителя. В Chrome есть встроенные инструменты для тестирования разрешений устройств с полным списком популярных устройств, с которыми можно работать. У вас всегда есть возможность самостоятельно перетащить окно браузера в разные размеры, чтобы увидеть, как сайт выглядит в разных размерах, а также как он адаптируется и ломается.
- Не ждите, что у ваших пользователей будет самое последнее и самое лучшее - Это восходит к предыдущему пункту о старых телефонах и небольших разрешениях. Нельзя ожидать, что у людей появятся новые устройства. Это касается как разрешения экрана, так и вычислительной мощности. Загрузка сайта со слишком большим количеством графики и слишком большим количеством JavaScript - хороший способ заставить людей с медленным устройством уйти и больше не возвращаться.