Как я могу изменить класс HTML для мобильного устройства?

Question

Как обновить класс Bootstrap .row-eq-height, чтобы иметь display: block; только для мобильных устройств?

Это то, что я пробовал.

$(document).ready(function() { 
    if ($(window).width() <= 768) { 
     $(".row-eq-height").css("display", "block"); 
    } 
}); 

Answer 1

метод CSS:

@media (max-width: 768px) { 
    .row-eq-height { 
     display: block; 
    } 
} 

Обязательно измените значение пикселя таргетинг на определенные мобильные устройства.

Подробнее о медиа-запросах здесь: CSS Media Queries - MDN Docs.

---

метод JQuery/JS:

function checkPosition() { 
    if (window.matchMedia('(max-width: 768px)').matches) { 
     //Do this 
    } else { 
     //Do that 
    } 
} 

Приведенный выше код не поддерживает IE9 из-за использования window.matchMedia().

Подробнее об этом методе здесь: Window.matchMedia() - MDN Docs.