How to make layouts for different resolutions?

Question

css

There are several layouts from the designer at 320px, 768px and 1368px. In the layout at 320px the title font is 20px, at 768px the font is 24px. Question: how to choose limits? The 24px font must be from 768px or up to 768px. And in general, the confusion with the layout of media (min-width) and media (max-width), what is indicated in the layout at 768px should be in the range from 768 to 1368 or from 320 to 768?

Answer 1

/* на всех разрешениях больше 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;
  }
}