Брейкпойнты в верстке?

Question

[Михаил]

Друзья!
Пролейте свет!
Если дан макет. В макете нарисовано три разрешения 1140 768 и 320 px.
И указано где 320 px, например значение для h1 font-size: 32px,
а там где нарисовано для разрешения 768, там значение для h1 font-size: 42px,
а для 1140 значение для h1 font-size: 52px,
то это что означает?
эти значения идут вверх или вниз от брейкпойнта?
т.е. мне надо ставить h1 font-size: 32px, от нуля и до 320 px, а после 320 px сразу идет 42 px.
Или наоборот, надо ставить 32 px от нуля до 320 px и дальше до 768 тоже 32 px, а только от 768 и выше будет 42 px, а потом после 1140 будет 52 px...

Comments

[Антон Литвиненко]

от здравого смысла. можно спросить у дизайнера, какую концепцию он использует: десктоп фест или мобайл фест.
Я, как человек, предпочитающий десктоп-фест в первую очередь смотрел бы от десктопа

[Кирилл Никитин]

Антон Литвиненко, давно хотел спросить предпочитающих десктоп-фёст — почему? Ведь вам известно, что сайт точно не откроют на экране меньше 0px, но не известно на чём могут открыть через пару лет? А так, сделали мобайл-фёст и при необходимости только добавляете брейкпоинты с развитием технологий.

[Антон Литвиненко]

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

[Михаил]

Антон Литвиненко, в этом то и вопрос, в какую сторону идут брейкпойнты?
Дали тестовое задание.
Есть макет. Для трех разрешений.
В варианте для 768 нарисовано две колонки. А эти две колонки они должны быть от 768 и выше? Или от 768 и ниже? Не понятно.

[Антон Литвиненко]

Михаил, та емае. И при том и при том подходе на выходе должно получится одно и то же. Вы спрашиваете от нуля и до 320. Нет нуля. Вы пишите сразу у body min-width: 320px. Все остальное от здравого смысла и внешнего вида. Если после 768 две колонки адекватно смотрятся скажем до 576 то можно превратить их в одну аж на 576. Но в итоге, независимо от того мобайл или десктоп вы получите одно и тоже на вид

[Михаил]

Антон Литвиненко, Вас понял , теперь все ясно

[Антон Литвиненко]

Михаил, вот тут в вопросе неплохо расписано
Адаптивная верстка для разных расширений?

[Михаил]

Антон Литвиненко, да, интересно расписано... откуда только такие цифры

Макет `768` пикселей показывает как будет выглядеть контент при размере экрана от 481 до 992 (!) пикселей

спрошу ка я у него пожалуй

[Антон Литвиненко]

Михаил, это ему задание такое тестовое дали

[Михаил]

Антон Литвиненко, да, но мне эти цифры ничего не дадут, у меня в макете такого не написано, так что я верстаю 320 - от 320 до 768, потом 768 - от 768 до 1104 , и все остальное

[Антон Литвиненко]

Михаил, как я уже говорил, все от здравого смысла.
К примеру мой стандартный набор брейкпоинтов это 1200, 992, 768, 576, 480. За основу взяты бутстраповские, так как я бывает использую его сетку. Плюс 480 на всякий случай. Обычно работаю десктоп фест, на десктопном макете допустим шрифт 60, на макете 768 40, на мобильном 320 скажем 24. Скорее всего, что я на 1200 сделаю его 50, на 992 44, а на 768 - 40, как в макете. Ну и дальше также по ситуации.
С изначально не такими большими шрифтами можно реже менять

Answer 1

[Кирилл Никитин]

32 до 768, 42 до 1140, а дальше 52.

Answer 2

[Kirill Makarov]

Вверх идут, меньше 320 нет уже смысла верстать

Answer 3

[profesor08]

@mixin mobile {
  @media (max-width: 767.98px) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: 768px) and (max-width: 1139.98px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1140px) {
    @content;
  }
}

h1 {
  @include desktop {
    font-size: 52px
  }

  @include tablet {
    font-size: 42px
  }

  @include mobile {
    font-size: 32px
  }
}

Comments

[Михаил]

А там при разрешении 320 идёт все в одну колонку. А при разрешении 768 в две колонки. А при разрешении 1140 в 4 колонки.
Мне тогда надо получается делать от 320 до 768 одну колонку? А от 768 до 1140 две колонки? А после 1140 и дальше 4 колонки?

[profesor08]

Михаил, такого вопроса возникать не должно, настоятельно рекомендую освоить @media запросы.

[Михаил]

profesor08, я медиазапросы то понимаю, просто в макете указано как-то не очень понятно.
Я с вашим вариантом согласен.
Тогда получается что одноколоночный макет будет от нуля и до 768. А от 768 и выше будет две колонки. Правильно?