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

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).

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Макет на 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 экранами.

Как сдвинуть select?

Qlink, не-не, я просто тезис автора ответа отверг, а ваш комментарий — дополнил. С вами же я согласен.

Есть ли аналоги Android xml вёрстки в вебе?

Только HTML и CSS.

Ну можете ещё на Canvas рисовать сайт полностью, конечно :))

Как сделать читалку комиксов?

Отправные шаги? CMS с кастомным функционалом.

Как сдвинуть select?

Qlink, Дмитрий Дерепко, margin работает, но с не полностью, с оговорками и особенностями (отрицательный, вертикальный margin, зависимость от контекста и т. п.):
https://www.w3.org/TR/CSS21/visuren.html#inline-fo...

Как сделать параллакс заднего фона?

Как получить чистый html код?

Сочувствую вам.


Ну а может вы всё-таки дополните вопрос дополнительной информацией? Откуда берётся код выше, что, как, зачем и почему?..

Откуда мы должны знать, откуда все эти атрибуты для скриптов?

Вёрстка двух блоков разной ширины с разными фонами до краёв экрана - как?

CSS Как правильно верстается такое, когда элементы выходят за каркас?

Словом, рыжий блок на абсолютное позиционирование.

Есть ли сервис где можно найти макеты для верстки, различной сложности с готовым примером верстки этого макета, чтобы себя проверить?

Тимур Турсунбаев, всё моё отношение к Bootstrap я выразил совсем недавно в комментариях к этому вопросу:
Как изменить высоту bootstrap?

Есть ли сервис где можно найти макеты для верстки, различной сложности с готовым примером верстки этого макета, чтобы себя проверить?

Тимур Турсунбаев, уже второй день с неё выпадаю :))

Да, я не очень умный человек.

Мерген Болдырев, напоминание: не используйте Bootstrap, он отключает способность к ясному мышлению.

Есть ли сервис где можно найти макеты для верстки, различной сложности с готовым примером верстки этого макета, чтобы себя проверить?

Тимур Турсунбаев, ну как бы:

Однако хорошо, что мы поняли друг друга!

Есть ли сервис где можно найти макеты для верстки, различной сложности с готовым примером верстки этого макета, чтобы себя проверить?

Тимур Турсунбаев, никогда не использую Bootstrap. Никогда и нигде.

Не совсем понял, откуда такие выводы?

Типичная моя вёрстка: