Задать вопрос
@crack_user
html

Как сделать адаптацию зума html?

Как сделать адаптацию объектов для зума, чтобы выглядело нормально при зуме? Думаю, что нужно поменять position, но в случае абсолюта - объекты при зуме вообще двигаются в другие стороны, при relative - тоже самое.
Вот 90%
626d8619d1e7b046789985.png
Вот 125%
626d8637beee3957762378.png
(на всякий кину сюда код) 
.background {
    position:fixed;
    width: 1980px;
    height: 1080px;
    background: #000000;
}
.email {
    position:fixed;
    top: 44%;
    left: 41%;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    width: 270px;
    height: 36px;
    border: none;
    outline: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.pass {
    position:fixed;
    top: 51%;
    left: 41%;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    width: 270px;
    height: 36px;
    border: none;
    outline: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.genius.site {
    z-index: 1000;
    position:fixed;
    top: 37.5%;
    left: 45.9%;
    width: 35px;
    height: 15px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 15px;
    /* identical to box height */


    color: black;
    border: none;
    outline: none;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}
#vhod {
    position:fixed;
    top: 60%;
    left: 45.9%;
    font-size: 13px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    color: #FFFFFF;
    position:fixed;
    z-index: 999;
    margin: 11;
    width: 90px;
    height: 37px;
    background: #030000;
    right: 121px;
    bottom: 250px;
    border: none;
    outline: none;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    transition: 2s;
}
#square {
    position:fixed;
    top: 32%;
    left: 37.9%;
    z-index: 998;
    width: 379px;
    height: 304px;
    background: #FFFFFF;
    right: -25px;
    bottom: 230px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}
  • Вопрос задан
  • 235 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 4
Anopeng
@Anopeng
Веб-программист, учу фронт и бек
Мда... Такого я давно не видел) Конечно, будет съезжать
top: 44%;
left: 41%;
...и т.д.

Это костыль явных новичков. Потому что нужно знать, что твой экран - это не экран других и пропорции могут отличаться. Тут нужно полностью переписывать этот отрывок CSS, чтобы исправить. Скинь разметку HTML, помогу
Ответ написан
3 комментария
3 комментария
imko
@imko
Senior Scratch Developer
Зум просто меняет вьюпорт, если у тебя адаптивная верстка для всех экранов будет то все и останется по красоте
Ответ написан
Комментировать
Комментировать
theillarionov
@theillarionov
Люблю frontend (иногда это даже взаимно)
Во-первых, поместите вашу форму в div#square.
Во-вторых, перепишите ему стили:

#square {
left: 50%; 
top: 50%;
transform: translate(-50%,-50%);
}


Тогда у вас контент вне зависимости от разрешения будет по центру.
Ответ написан
Комментировать
Комментировать
gds1
@gds1
Пыха - это наше всё)))
ну так ты же по центру делай, а не 
position:fixed;
    top: 44%;
    left: 41%;

сделай хоть 50% \ 50%
и margine-top и margin-left что бы по центру было.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн интерьера для заведения
27 апр. 2024, в 21:24
150000 руб./за проект
Нужно добавить несколько параллакс эффектов
27 апр. 2024, в 21:12
500 руб./за проект
Доработать функционал загрузки прайсов в БД
27 апр. 2024, в 20:40
5000 руб./за проект
Ещё заказы