Если коротко, то разрешения экранов делятся следующим образом:
- 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 пикселей. Если даже там показывается чуть-чуть "не очень" - игнорируем. Трафика там нет, там люди с извращенскими устройствами. Худшее, что можно сделать - наплодить под них очередной брэйкпоинт. Чем меньше брэйкпоинтов - тем лучше.