Здравствуйте. <br/> Я ознакомился со статистикой по разрешениям в пикселях в метрике и обнаружил большое разнообразие данных. <br/>
Здравствуйте! Определение опорных точек (или "breakpoints") в разработке адаптивного дизайна сайта — это важный шаг для обеспечения удобства использования вашего сайта на различных устройствах. Вот несколько рекомендаций по определению этих точек: 1. **Анализ статистики пользователей**: Как вы уже отметили, полезно изучить статистику разрешений экранов, посещающих ваш сайт. Убедитесь, что вы берете в расчет популярные разрешения и устройства среди вашей аудитории. 2. **Стандарты разрешений**: Есть общепризнанные стандартные точки в медиа-запросах, которые можно использовать в качестве отправной точки: - 320px — мобильные устройства - 480px — маленькие планшеты - 768px — стандартные планшеты - 1024px — маленькие ноутбуки - 1280px и выше — большие экраны (десктопы и HD) 3. **Типы контента**: Обратите внимание на то, как контент вашего сайта себя ведет при изменении ширины экрана. Например, если у вас есть меню, изображения или текстовые блоки, которые начинают сжиматься или накладываться на друг друга, это может быть хорошей возможностью для создания новой опорной точки. 4. **Эстетика и удобство**: Также учитывайте визуальный и пользовательский опыт. Если на определенной ширине элементы выглядят плохо или не читаемы, стоит добавить опорные точки для их корректировки. 5. **Тестирование**: После определения опорных точек внимательно протестируйте их на различных устройствах и масштабах экрана. Иногда может потребоваться доработка в зависимости от того, как ваш дизайн ведет себя в процессе использования. 6. **Используйте гибкие единицы измерения**: Вместо фиксированных пикселей, старайтесь использовать относительные единицы измерения, такие как em или rem, а также проценты. Это делает ваш дизайн более устойчивым к различным разрешениям. 7. **Создание прототипов**: Разработайте несколько вариантов макетов для разных опорных точек, чтобы увидеть, как они выглядят и как лучше адаптировать контент под разные размеры. Определение опорных точек — это процесс, который может меняться по мере развития вашего проекта и изменения потребностей пользователей. Не забывайте проверять и обновлять ваши точки для достижения наилучшего результата.
1. Их может нарисовать дизайнер. <br/> 2. Их можно взять из любого фреймворка или статистики. <br/> 3. Можно (и хорошо бы) добавлять там, где ломается конкретный дизайн. <br/> <br/> <blockquote>чтобы упростить написание стилей?</blockquote> <br/> Так не выйдет, каждый дизайн разный (ну если работать с хорошими и разными дизайнерами, а не под копирку), также браузер может быть открыт на произвольную ширину, особенно на больших мониторах. <br/> И нет смысла, например, ждать увеличения до 768, когда уже на 600 можно показать следующую версию, если конкретный дизайн это позволяет. <br/> <br/> Но <b> можно упростить и сократить</b> за счет относительных единиц измерения, calc, функций clamp, min, max, а также родных свойств флексов и гридов. <br/> <br/> Также поможет использование препроцессорных переменных. Делаете как-то так (значения от балды на основе какого-то из проектов): <br/> <pre><code>$elg: 1526px;
$lg: 1000px;
$md: 720px;
$sm: 540px;
$esm: 360px;</code></pre> <br/> Количество может меняться в зависимости от проекта. <br/> И используете в media. <br/> <pre><code>@mixin sm {
@media (min-width: variables.$sm) {
@content;
}
}
@include sm {
//some
}</code></pre> <br/> При переходе в новый проект, смотрите макет и меняете переменные.
Посмотрите в любом популярном css фремворке и ориентируйтесь на них: <br/> - <a href="https://tailwindcss.com/docs/responsive-design" rel="nofollow">https://tailwindcss.com/docs/responsive-design</a> <br/> - <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/" rel="nofollow">https://getbootstrap.com/docs/5.0/layout/breakpoints/</a> <br/> - <a href="https://pure-css.github.io/grids/" rel="nofollow">https://pure-css.github.io/grids/</a> <br/> <br/> У них у всех примерно одинаковые значения (небольшая погрешность есть). Воспринимайте их за общепринятый стандарт (свои уже по необходимости добавляйте): <br/> <pre><code class="markdown">| Размер | Tailwind | PureCSS | Bootstrap 5 | |---------|----------|-------------|-------------| | sm | 640px | 568px | 576px | | md | 768px | 768px | 768px | | lg | 1024px | 1024px | 992px | | xl | 1280px | 1280px | 1200px | | 2xl | 1536px | 1920px | 1400px |</code></pre>
А самому-то зачем эти опорные точки выбирать? <br/> Используй Bootstrap для адаптивной вёрстки. <br/> <a href="https://bootstrap-4.ru/docs/4.0/utilities/flex/" rel="nofollow">https://bootstrap-4.ru/docs/4.0/utilities/flex/</a>