Адаптивное окно

424

15 марта 2017, 18:53

Здравствуйте!

Делаю форму заказа, столкнулся с проблемой, как её сделать адаптивной для разных размеров экрана.

Сама форма формируется путем помещения туда html через js. В popup_text помещаю что мне нужно. Стиль под каждый экран меняю так:

if (document.documentElement.clientWidth <768) {
              $('.popup-content').css({'width': '80%', 'height': '80%'});
         }
         else if (document.documentElement.clientWidth <992) {
            $('.popup-content').css({'width': '60%', 'height': '60%'});
         }
         else{
            $('.popup-content').css({'width': '320px', 'height': '690px'});
         }

Все это можно посмотреть здесь , нажав на кнопку заказать(блок, который висит слева). Базовый стиль задан так же для формочки с благодарностью(можете попробовать отправить данные, они идут на почту для отладки) и имеют размер 250px, который смотрится хорошо на всех экранах.

Собственно, вопрос:

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

Спасибо.

Answer 1

Не хватает еще overflow: auto; для popup-content. Остальные параметры через медиа-запросы расставить. Например:

@media screen and (min-width: 200px) and (max-width: 600px) {
    .popup-content {
        width: 80% !important;
        height: 80% !importnat;
    }
}

Скрипт там вообще лишний. Разные параметры лучше применять именно в таблице стилей.