Я разработал панель инструментов для своего сайта, которая на моем экране выглядит довольно красиво.Мое разрешение - 1920x1080 при 100% увеличении.Моя панель управления выглядит ужасно на моем коллегном компьютере, потому что он с разрешением 3200x1200 и увеличением 300%.Другой коллега - 1280x720 при 150% увеличении.У меня возникают трудности с выяснением того, как учесть все эти кардинально разные размеры экрана.
Я использую медиазапросы и систему координат для перемещения определенных компонентов в зависимости от размера экрана, но я чувствую, чтоЯ не правильно понимаю лучший способ справиться с огромным диапазоном размеров экрана.Я также испытываю затруднения даже с тестированием того, как будет выглядеть моя приборная панель на определенных экранах, потому что я не могу установить разрешение 3200x1200 при увеличении 300%.
То, что я хотел бы получить, по сути настроеноТочки разрыва, если размер экрана планшета меньше или меньше, чтобы переделать порядок моих компонентов, но для всего, что выше этого, просто по сути уменьшите размер экрана, чтобы макет выглядел одинаково для каждого ноутбука.
Чтобы реализовать это, я пробовал что-то вроде этого:
`@media (min-width: 1400px) {
.dashboard {
zoom:70%;
}
}
`
, но я слышал, что использование zoom не очень удобно для рабочих сайтов, потому что оно работает не во всех браузерах.Я также пытался использовать webkit и transform, но, хотя это сокращает эту панель, она также уменьшает общую ширину и высоту, поэтому она больше не покрывает контейнер.
Это может быть помечено как повторный вопрос, но единственноепохожие вещи были 8 лет назад, и методы были совершенно другими.