Как определить «опорные точки» (breakpoints) для изменения ширины экрана при разработке стилей сайта?

Здравствуйте!

Определение опорных точек (или "breakpoints") в разработке адаптивного дизайна сайта — это важный шаг для обеспечения удобства использования вашего сайта на различных устройствах. Вот несколько рекомендаций по определению этих точек:

1. **Анализ статистики пользователей**: Как вы уже отметили, полезно изучить статистику разрешений экранов, посещающих ваш сайт. Убедитесь, что вы берете в расчет популярные разрешения и устройства среди вашей аудитории.

2. **Стандарты разрешений**: Есть общепризнанные стандартные точки в медиа-запросах, которые можно использовать в качестве отправной точки:
   - 320px — мобильные устройства
   - 480px — маленькие планшеты
   - 768px — стандартные планшеты
   - 1024px — маленькие ноутбуки
   - 1280px и выше — большие экраны (десктопы и HD)

3. **Типы контента**: Обратите внимание на то, как контент вашего сайта себя ведет при изменении ширины экрана. Например, если у вас есть меню, изображения или текстовые блоки, которые начинают сжиматься или накладываться на друг друга, это может быть хорошей возможностью для создания новой опорной точки.

4. **Эстетика и удобство**: Также учитывайте визуальный и пользовательский опыт. Если на определенной ширине элементы выглядят плохо или не читаемы, стоит добавить опорные точки для их корректировки.

5. **Тестирование**: После определения опорных точек внимательно протестируйте их на различных устройствах и масштабах экрана. Иногда может потребоваться доработка в зависимости от того, как ваш дизайн ведет себя в процессе использования.

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

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

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

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
}
 
 При переходе в новый проект, смотрите макет и меняете переменные.

Посмотрите в любом популярном 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      |

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