Как поставить медиа-запросы в JavaScript - PullRequest
Новая
       6

Как поставить медиа-запросы в JavaScript

0 голосов
/ 07 ноября 2018

Я новичок в JavaScript, я пытаюсь выяснить, как написать медиа-запрос под 768px. У меня 3 блока с одинаковой высотой, когда у другого блока длинный заголовок, за ним последует высота из 2 блоков. Мой JavaScript работает хорошо, но у меня проблема с 768px. Я хочу отключить функцию, которую я сделал под 768px. Есть ли кто-нибудь, кто может направить меня? Ваша помощь будет высоко оценена. `

function sameHeightCta(mediaQuery) {
    varHcta;

    if (mediaQuery.matches) {
        $('.c-cta-box .c-cta-box-headline').css('height', window.GlobalElementHight + 'px');
    } else {
        $('.c-cta-box .c-cta-box-headline').css('height', window.GlobalElementHight);
    }
}

function init() {

    var currentElementHight = window.matchmedia('(min-width: 768px) and (max-width: 991.98px)');
    currentElementHight.addListener(sameHeightCta);
    sameHeightCta(GlobalElementHight);


    window.GlobalElementHight = 0;
    $('.c-cta-box .c-cta-box-headline').each(function (index) {
        var currentElementHight = $(this).height();
        if (window.GlobalElementHight < currentElementHight) {
            window.GlobalElementHight = currentElementHight;
        }
    });
    $('.c-cta-box .c-cta-box-headline').css('height', window.GlobalElementHight + 'px');
}`

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вот решение, которое я принял, чтобы решить проблему. 

$(window).resize(function () {

    if (window.innerWidth < 768) {
        $('.c-cta-box .c-cta-box-headline').css("height", "");
    } else {
        window.GlobalElementHight = 0;
        $('.c-cta-box .c-cta-box-headline').each(function (index) {
            var currentElementHight = $(this).height();
            if (window.GlobalElementHight < currentElementHight) {
                window.GlobalElementHight = currentElementHight;
            }
        });
        $('.c-cta-box .c-cta-box-headline').css('height', window.GlobalElementHight + 'px');
    }
});
0 голосов
/ 08 ноября 2018

Я бы попробовал это if (screen.width > 768) { //put here the function you wanna disable on small devices}

...