Задать вопрос
weranda
@weranda

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

Приветствую.
Посмотрел в метрике статистику по разрешениям в пикселях — чего там только нет:
673372fbeb08f478360035.png
Сегодня эти ширины одни, завтра — другие. Какие ширины выбирать? И как?
Я понимаю, что все вообще должно быть адаптивненько для каждого пикселя ширины, но есть ли какие-то определенные универсальные промежуточные точки, чтобы упростить написание стилей?
  • Вопрос задан
  • 148 просмотров
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 3
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
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
}

При переходе в новый проект, смотрите макет и меняете переменные.
Ответ написан
Комментировать
@ImagineTables
Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.
Ответ написан
Afranius
@Afranius
Из говорящих дольше живут те, что говорят меньше.
А самому-то зачем эти опорные точки выбирать?
Используй Bootstrap для адаптивной вёрстки.
https://bootstrap-4.ru/docs/4.0/utilities/flex/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы