Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта?

Question

[weranda]

Приветствую.
Посмотрел в метрике статистику по разрешениям в пикселях — чего там только нет:

Сегодня эти ширины одни, завтра — другие. Какие ширины выбирать? И как?
Я понимаю, что все вообще должно быть адаптивненько для каждого пикселя ширины, но есть ли какие-то определенные универсальные промежуточные точки, чтобы упростить написание стилей?

Comments

[Виталий Першин]

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

Answer 1

[Ankhena]

1. Их может нарисовать дизайнер.
2. Их можно взять из любого фреймворка или статистики.
3. Можно (и хорошо бы) добавлять там, где ломается конкретный дизайн.

чтобы упростить написание стилей?

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

Но можно упростить и сократить за счет относительных единиц измерения, calc, функций clamp, min, max, а также родных свойств флексов и гридов.

Также поможет использование препроцессорных переменных. Делаете как-то так (значения от балды на основе какого-то из проектов):

$elg: 1526px;
$lg: 1000px;  
$md: 720px; 
$sm: 540px; 
$esm: 360px;

Количество может меняться в зависимости от проекта.
И используете в media.

@mixin sm {
  @media (min-width: variables.$sm) {
    @content;
  }
}

@include sm {
  //some
}

При переходе в новый проект, смотрите макет и меняете переменные.

Answer 2

[Aleksey Solovyev]

Посмотрите в любом популярном css фремворке и ориентируйтесь на них:
- https://tailwindcss.com/docs/responsive-design
- https://getbootstrap.com/docs/5.0/layout/breakpoints/
- https://pure-css.github.io/grids/

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

| Размер  | Tailwind | PureCSS     | Bootstrap 5 |
|---------|----------|-------------|-------------|
| sm      | 640px    | 568px       | 576px       |
| md      | 768px    | 768px       | 768px       |
| lg      | 1024px   | 1024px      | 992px       |
| xl      | 1280px   | 1280px      | 1200px      |
| 2xl     | 1536px   | 1920px      | 1400px      |

Comments

[weranda]

Смотрел. Вот только почему именно такие у них ширины? — Думаю, по той причине, что раньше это было неким стандартом из-за более или менее унифицированных разрешений экранов устройств. И эти фреймворки используют эти ширины по инерции, не меняя их годами, несмотря на новые ширины устройств. Или я не прав? К примеру, судя по статистике, разрешений в 640 пикселей — 0,2%.
Теперь же разных разрешений очень много и часто они меняются. Может быть, есть какой-то универсальный подход? К примеру, зафигачить на каждый n-ширин (1200, 1100, 1000, 900...)?

[Aleksey Solovyev]

weranda, вы правы, но это мало что меняет. Эти значения стали базовым и устоявшимся списком брейкпоинтов для фронтенда, которые вы встретите практически в каждом фреймворке. Дизайнеры под них обычно "рисуют" проекты (в figme/adobe например +/- такие же размеры когда вы выбираете размер фрейма сбоку). Размеры в библиотеках опираются на этот же список (ChakraUI) и тд

К примеру, зафигачить на каждый n-ширин (1200, 1100, 1000, 900...)?

Будете под каждый экран "двигать" блоки? Если же вы ищете универсальный подход, рассмотрите использование резиновой вёрстки/Responsive Web Design.

Answer 3

[Сергей Сахаров]

А самому-то зачем эти опорные точки выбирать?
Используй Bootstrap для адаптивной вёрстки.
https://bootstrap-4.ru/docs/4.0/utilities/flex/

Comments

[weranda]

Чуть раньше дал комментарий в вопросе по этой ситуации. Если кратко, то опорные точки во фреймворках слабо коррелируют с действительностью.

[Сергей Сахаров]

С другой стороны не так много задач требуют высокую точность адаптивной вёрстки. ИМХО.

[alexalexes]

weranda, заявленный viewport для робота статистики и фактически используемая область просмотра может не совпадать.
Цифры статистики очень странные, как будто у вас статистику робот забирает с голой страницы, когда ничего не загрузилось и когда еще непонятен масштаб отображения страницы.

[Ankhena]

alexalexes, из вашей фразы можно подумать, что размер вьюпорта меняется в зависимости от того, загрузилось туда что-то или ещё нет.

Answer 4

[ImagineTables]

Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.