две ширины экрана: 375 пикселей и 1024 пикселей

Question

Как мне создать сайт с двумя размерами экрана: 375 пикселей и 1024 пикселей?веб-сайт не должен реагировать на ширину между двумя экранами.

@ media и (min-width: 375px) и (max-width: 1024px) Насколько я знаю, этот тег работает между 375 и 1024Возможно, использование точки останова - правильный подход.Любое предложение?

Answer 1

Всегда лучше спроектировать свой CSS mobile-first, что означает, что ваш CSS-файл выглядит примерно так:

CSS:
// Basic CSS
div {
  height: 200px;
  width: 200px;
  background-color: yellow;
}

@media screen and (min-width: 375px) {
  div {
    height: 150px;
  } 
}

@media screen and (min-width: 1024px) {
  div {
    height: 100px;
    background-color: red;
  }

Таким образом, у вас есть div, который визуализирует тремя различными способами на вашемточки останова

1. 0 - 374px это квадрат 200x200 пикселей с желтым фоном
2. 375px - 1023px это прямоугольник 150x200 пикселей с желтым фоном
3. 1024px иэто прямоугольник размером 100x200 пикселей с красным фоном

Таким образом, вы не повторяете себя слишком часто, ваш код остается чистым, и вы переопределяете только то, что необходимо.

Answer 2

Я даю медиазапросов для всех устройств с портретным режимом, а также .Мне дали медиа-запрос CSS с использованием точки останова.Используйте этот медиа-запрос для лучшего использования, а также портретные устройства включают в этот ответ:

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

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

  //CSS

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  //CSS

}