Как верстать макеты под разные разрешения?

Question

[Tanya__K]

Есть несколько макетов от дизайнера на 320рх, 768px и 1368рх. В макете на 320рх шрифт заголовка 20рх, на 768рх шрифт 24рх. Вопрос: как выбирать пределы? Шрифт 24рх должен быть начиная с 768рх или до 768рх. И в целом путаница с версткой media (min-width) и media (max-width), то что указано в макете на 768рх должно быть пределах от 768 до 1368 или от 320 до 768?

Comments

[Rustam Bainazarov]

Макет на 320 пикселей — архаизм. Это разрешение iPhone 5. Современная ширина мобильного макета — 360 пикселей (большое количество Android-устройств) или 375px (iPhone 6, 7, 8, X, XS). Но лучше первый.

Разрешение 1366px — вообще так себе. Ибо не учитывает разрешение 1360px + ширину скроллбара.

Ну раз так сделал дизайнер, то и делайте такие диапазоны.

@media (max-width: 767px) {

}

@media (min-width: 768px)
and (max-width: 1299px) { 

}

@media (min-width: 1300px) { 

}

Вообще, промежутки, особенно начиная с 768px, — какие-то косые. Где планшеты в альбомной ориентации (преимущественно iPad? Где промежуток между 1024 и 1360px? Есть куча устройств с 1200–1280px экранами.

[Tanya__K]

Рустам Байназаров, у меня больше вопрос относительно медиа запросов. Если в макете на 768рх указан другой шрифт, отступы и все остальное, в css их прописывать в media (max-width: 768px) или начиная от 768рх, то есть в media (min-width: 768px)?

[Rustam Bainazarov]

Tanya__K, погодите, там шрифт ещё меняется в зависимости от разрешения? :))

Ну а так — (min-width: 768px) and (max-width: ###px).

[Tanya__K]

да, и не только он.

[Rustam Bainazarov]

Tanya__K, если вы пропишите (max-width: 768px), то у вас будет наложение, т. к. (max-width: 767px) входит в (max-width: 768px).

[Rustam Bainazarov]

Tanya__K, а можно посмотреть макет? :))

Впервые вижу, чтобы шрифт менялся в зависимости от разрешения. Интересно, чем аргументированно данное решение.

[Tanya__K]

а чем это плохо? на большом мониторе заголовок h1 на 50рх будет выглядеть нормально, а на мобильном просто не влезет

[Rustam Bainazarov]

Tanya__K, так погодите-ка. Вы неправильно написали. Меняется не шрифт, а его размер. Тогда всё нормально, конечно.

[Tanya__K]

Точно, неправильно выразилась, извиняюсь

[Tanya__K]

Рустам Байназаров, спасибо за ответы

[Rustam Bainazarov]

Tanya__K, да не страшно, главное, что в шаблоне такой херни нет.

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

Я вижу ваши сообщения лишь потому, что вручную обновляю страницу и слежу за счётчиком комментариев.

[wqertAnna]

Tanya__K, меняется именно шрифт или размеры шрифта?
Второе это нормально, первое было бы странно.

[Tanya__K]

Рустам Байназаров, та вродь печатаю через "ответить" с @

[Rustam Bainazarov]

Tanya__K, в ответе от wqertAnna есть не очень хорошая практика — совпадение диапазонов:

@media screen and (max-width: 1368px) {
  // включает в себя (max-width: 768px)
}
@media screen and (max-width: 768px) {

}

Поэтому данный код будет прямо зависеть от иерархии каскада. Ну screen особо не нужен в обычном медиазапросе. Если у вас нет специальных планов на другие типы носителей (print и т. п.).

Поэтому лучше так не делать, а делать именно несовпадающими диапазонами в качестве основного подхода.

[Rustam Bainazarov]

Tanya__K, часто без @:

[Tanya__K]

Рустам Байназаров, да, вы правы, не заметила

[wqertAnna]

Рустам Байназаров, используя этот подход очень хорошо видно, что изменилось.

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  text-transform: lowercase;
  font-size: 50px;
}
@media screen and (max-width: 1368px) {
  .box {
    height: 80px;
    background-color: green;
    text-transform: uppercase;
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .box {
    height: 80px;
    font-size: 20px;
  }
}

т.е. сразу можно понять, какое отличие между мобильным разрешение и на планшете, не нужно копипастить или писать много медиазапросов, т.е. и max-width, и min-width and max-width
Как по мне то это более загруженный код и менее интуитивно понятный

Когда пишешь в sass, моим способом, всё выглядит очень локанично

.icon-block
			width: 112px
			height: 100px
			display: flex
			justify-content: flex-start
			align-items: center
			margin-bottom: 30px
			+max-width($tablet)
				margin-bottom: 20px
			+max-width($mobail)
				width: 90px
				height: 77px
				margin-bottom: 15px
			+max-width($sm-mobail)
				justify-content: center

насколько мне известно это не сильно влияет на производительность.

[Rustam Bainazarov]

wqertAnna, не совсем понял про копирование media-запросов. Я использую вот это для SASS:
https://include-media.com/

Поэтому исходник тоже чистый (синтаксис SASS я очень не люблю, поэтому SCSS):

.s-product-card {
  $self: &;
  $transition-time: .2s;
  $gap: 10px;
  $indicator-gutter: 10%;
  $country-item-gap: .5em;
  $sale-tag-height: 24px;
  $sale-tag-angle-width: 10px;

  height: 100%;
  color: #000;
  font-size: 14px;
  position: relative;
  display: flex;
  flex-flow: column;
  transition: transform $transition-time;
  @include no-touch-glow-mobile();

  // Зона наверху
  @at-root #{$self}__quick-view {
    padding: 10px 10px 5px 10px;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity $transition-time;

    @at-root #{$self}__quick-view-btn {
      transform: translateY(-10px);
      font-size: 15px;
      height: 36px;

      // Вот №1
      @include media(">phone-all", "<=table-portrait") {
        font-size: 11px;
        padding-left: 0;
        padding-right: 0;
      }

      // Вот №2
      @include media(">table-portrait", "<=tablet-landscape") {
        font-size: 12px;
      }

      // Вот №3
      @include media(">tablet-landscape", "<desktop") {
        font-size: 13px;
      }

      // Вот №4
      @include media("print") {
        display: none;
      }

    }

  }

  // 
  // Там ещё 1300 строк кода, поэтому их тут нет
  //
  
}

Словом, это больше проблема к подходу, но с диапазонами достигается большая изоляция свойств (а-ля имитация local scope).

[wqertAnna]

Рустам Байназаров, хм, в моей компании верстают тем способом, что я скинула

Разумеется, я к нему привыкла.
Мне будет интересно ознакомиться с тем методом, что используете Вы.
Вы не в курсе насколько это популярный плагин?

[Rustam Bainazarov]

wqertAnna, не знаю, но эта одна из самых популярных SASS-библиотек для этого дела (1600+ звёзд на GitHub):
https://github.com/eduardoboucas/include-media/

Answer 1

[wqertAnna]

/* на всех разрешениях больше 1368рх  28px; */
.title {
    font-size: 28px;
  }

/* на разрешении от  1368рх до 769px будет шрифт 24px; */
@media screen and (max-width: 1368px) {
  .title {
    font-size: 24px;
  }
}

/* на разрешении от 768px и ниже будет шрифт 20px; */
@media screen and (max-width: 768px) {
  .title {
    font-size: 20px;
  }
}

Answer 2

[Илья]

Или можете сразу привыкать писать в mobileFirst:

.title {
    font-size: 20px;
}

@media screen and (min-width: 768px) {
    .title {
        font-size: 24px;
    }
}

@media screen and (min-width: 1368px) {
    .title {
        font-size: 28px;
    }
}

Comments

[Tanya__K]

Вот как раз путаница с перестройкой мышления на mobileFirst. Например, если в макете меню до 768рх - гамбургер, а в макете для разрешения 1368рх развернуто на весь хедер, его нужно разворачивать после 768рх или после 1368рх?

[Илья]

если в макете меню до 768рх - гамбургер, а в макете для разрешения 1368рх развернуто на весь хедер, его нужно разворачивать после 768рх или после 1368рх?

А как меню нарисовано в макете на 768px ?

[Tanya__K]

Илья, оно скрыто, открывается при клике на кнопку, а в 1368рх развернуто в хедере

[wqertAnna]

Tanya__K, макет означает, что так должно выглядеть приложение от расширения макета и выше до значения ширины следующего макета

т.е. на разрешении от 320px до 767px все выглядит, как на макете 320px
на разрешении от 768px до 1367px все выглядит, как на макете 768px
при разрешении равном 1368px и выше - как на макете 1368

[Tanya__K]

wqertAnna, вот, Вы мне все прояснили, спасибо!

[Илья]

Tanya__K, итак, получаем следующее:
- на макете 320 мобильное меню
- на макете 768 мобильное меню
- на макете 1368 десктопное меню

Смотрим от меньшего к большему:
- минимальная ширина = 320
- от 320 до 767 мобильное меню
- от 768 до 1367 мобильное меню
- от 1368 десктопное меню.
Именно так нужно смотреть на макеты.

А теперь важный момент: держите контакт с дизайнером. По опыту могут сказать, что они могут думать задом-наперед. Так что стоит перестраховаться.

[Tanya__K]

Илья, да, я вот тоже запуталась с выбором направления. Спасибо большое, теперь все ясно))