Комплексный маркетинг сайта: продвижение сайта, контекстная реклама, соц. сети, аналитика
Главная » Статьи » Дизайн » Разрешения экрана (2021.04.04)

Разрешения экрана (2021.04.04)

Ссылка на анализ

Если коротко, то разрешения экранов делятся следующим образом:

  • 320...767 = 76.81%
  • 768...1023 = 1,98%
  • 1024...1919 = 14,49%
  • >=1920=6,81%

Следовательно, в качестве правильных брэйкпоинтов, но для pc-first мы используем style.css с основными стилями, затем mobile.css, в которых используются всего 3 брэйкпоинта именно в этом порядке, на уменьшение:

  • @media (max-width: 1919px) { }
  • @media (max-width: 1023px) { }
  • @media (max-width: 767px) { }

Верстаем, в свою очередь, под размеры:

  • 320...767
  • 768...1023
  • 1024...1919
  • >=1920

А рисуем под размеры:

  • 320
  • 768
  • 1024
  • 1920

Проверяем сайт под размеры:

  • 360 = 28,35%
  • 375 = 11,78%
  • 414 = 9,82%
  • 412 = 9,62%
  • 393 = 9,19%
  • 1920 = 6,62%
  • 1366 = 3,97%
  • 320 = 3,85%
  • 1280 = 2,99%
  • 1536 = 2,54%
  • 1440 = 1,23%
  • 1024 = 1,16%
  • 1600 = 1,10%
  • 424 = 0,90%
  • 768 = 0,74%
  • 1680 = 0,60%
  • 390 = 0,56%
  • 428 = 0,37%
  • 2560 = 0,37%
  • 384 = 0,28%
  • 800 = 0,27%
  • 601 = 0,24%
  • 1360 = 0,17%
  • 962 = 0,16%
  • 834 = 0,15%
  • 600 = 0,14%
  • 385 = 0,13%
  • 960 = 0,12%

Не переживаем за сильно промежуточные размеры, вроде 767 пикселей. Если даже там показывается чуть-чуть "не очень" - игнорируем. Трафика там нет, там люди с извращенскими устройствами. Худшее, что можно сделать - наплодить под них очередной брэйкпоинт. Чем меньше брэйкпоинтов - тем лучше.

Во всех статьях в коде заменены:

[ на [

{ на {

< на &123;

Звоните +7 (812) 914-41-56, ответим на вопросы на тему работы с MODX Evolution или комплексного маркетинга.

Заказать эту или любую другую услугу вы можете на странице контактов.