Сохранять ли перевод значений css (x, y) одинаковыми для всех разрешений экрана?

Question

Я использовал translate css (translate (100,200)) для анимации моего объекта.Но есть проблема с этим, у меня другое разрешение, и когда я помещаю некоторые другие координаты для другого экрана, чтобы мой объект исчезал из моего экрана.Помогите, пожалуйста, как мне использовать translate css для всех экранов?

Answer 1

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

Таким образом, у вас есть два основных решения:

• Используйте позиционное позиционирование в процентах, основная проблема в том, что вы никогда не имеете точного контроля над тем, где ваши элементы будут располагаться на экране, так как 20% экрана шириной 320 пикселей сильно отличается от 20% на ширине 1920 пикселей.display.

• Используйте медиазапросы, это, вероятно, лучшее решение, хотя оно требует немного больше работы.Я рекомендую устанавливать холст / контейнер на определенную ширину / высоту при каждом скачке разрешения, так что вы, вероятно, можете обойтись с 3 или 4 различными размерами.

Важно отметить, чточто вы можете комбинировать оба в некоторых точках в зависимости от ваших конкретных потребностей, вот основной пример того, как я бы установил размеры контейнера:

.container {
    width: 1200px;
    height: 800px;
}
.container .child {
    /*animation stuff*/
}
@media (max-width: 1199px){
    .container {
        width: 900px;
        height: 600px;
    }

    .container .child {
        /* animation adjustments */
    }

}
/* etc... */

Еще одна изящная вещь в настройке статических размеров - это то, что у вас естьлучший контроль с вашими процентами, особенно если вы сохраняете пропорции ширины / высоты равными.