как установить медиа-запрос для экрана такой нагрудник, что я не могу сделать проб и ошибок в Dev Tools

Question

Я выполнял медиазапросы для адаптивного поведения и хорошо работал на небольших и больших устройствах, таких как ноутбуки, но кто-то пробовал это на Mac, и контент стал беспорядочным.Как я могу задать медиа-запросы для размеров экрана, которые я не знаю?Спасибо

Answer 1

Медиа-запросы предназначены для определения конкретной максимальной и минимальной ширины.Для неизвестных больших экранов у вас есть 2 варианта:

1.Установка фиксированной ширины, когда размер экрана достигнет определенной ширины, чтобы содержимое всегда отображалось одинаково.

@media screen and (min-width: 1400px) {
  .page-wrapper {
    width: 1400px;
  }
}

2. Позаботьтесь о том, чтобы установить для страницы значение 100% и работать с процентами для всех основных элементов (тех, которые могут выглядеть неработающими). ​​

@media screen and (min-width: 1400px) {
  .page-wrapper {
    width: 100%;
  }
}