Задать вопрос
@matvey_tepaykin
javascript

Как решить мой косяк с адаптацией сайта?

Делаю свой первый адаптивный сайт и возникла такая проблема, если резко перетаскивать браузер на весь экран, то сайт не адаптируется под новые размеры и по краям появляются фоновые полосы, как при масштабе. А если это делать медленно(если это можно так назвать) или при нажатии на кнопку, то все прекрасно работает. Как это исправить? Может хотя бы костыль какой-нибудь можете посоветовать(
  • Вопрос задан
  • 187 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@matvey_tepaykin Автор вопроса
решил проблему таким способом

var c = String(Math.floor((window.outerWidth / window.innerWidth) * 100) / 100);
var d = ['0.25', '0.33', '0.5', '0.67', '0.75', '0.8', '0.9', '1'];

if (d.indexOf(c) == -1) {
    for (var i = 0; i < d.length; i++) {
        if (Number(d[i]) > Number(c)) {
            $(':root').css('--max-width-one', window.innerWidth * Number(d[i]) + 'px');
            $(':root').css('--width-out', window.innerWidth * Number(d[i]) + 'px');
            break;
        }
    }
}


:root { 
  --width-out: 1920px;
  --max-width-one: 1920px;
}

.header, .section_one,
.section_two, .footer {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-one); 
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@Rerurk
Орентируй размещение на window.inerwidth
Ответ написан
1 комментарий
1 комментарий
MaximAr1es
@MaximAr1es
Frontend junior developer
Во первых:
<meta name="viewport" content="width=device-width, initial-scale=1">

Родительские блоки по высоте выстраиваются за счёт их потомков + margin/padding. По ширине задавай только max-width - чтобы блоки не были больше размера указанного, а если область просмотра меньше, то блоки будут масштабироваться.
Все дочерние элементы выставляй в процентных размерах(ширину), чтобы они занимали весь родительский блок.

<body><div class="main-wrapper"><div class="main"></div></div></body>


В данном случае.
body{
display: flex;
jusctify-content: center;
align-items: center;
// или дочернему объекту margin: 0 auto;
}
.main-wrapper{
max-width: 1200px;
}
.main{
width: 100%;
}
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Деплой приложения
24 нояб. 2024, в 16:14
1000 руб./за проект
Написать запросный бот парсер поиска с функцией автоматической записи
24 нояб. 2024, в 15:21
120000 руб./за проект
Дизайн интерфейса веб-приложения
24 нояб. 2024, в 14:37
3000 руб./в час
Ещё заказы