Различный класс в HTML в зависимости от размера экрана

Question

Я новичок в начальной загрузке, и я не знаю, как сделать следующее: я работаю с Django, и в моем шаблоне HTML у меня есть это:

<div class="tabs tabs-vertical tabs-left">
                            <ul class="nav nav-tabs">

Это прекрасно работает с большимиэкраны, но это выглядит некрасиво, когда я захожу на страницу с моим телефоном, поэтому мне нужно, чтобы мой шаблон выглядел следующим образом, если экран xs:

<div class="tabs">
                            <ul class="nav nav-tabs nav-justified flex-column flex-md-row">

Можно ли это сделать с помощью начальной загрузки?Нужно клонировать весь контент div и скрывать в зависимости от экрана?Спасибо.

Answer 1

Просто используйте javascript для добавления классов, если ширина экрана меньше желаемой точки останова.Поскольку вы используете Bootstrap, вы можете использовать jQuery, чтобы упростить его.Пример:

if (window.innerWidth <= 500) {
  $('#nav').removeClass('tabs-vertical tabs-left');
  $('#navUl').addClass('nav-justified flex-column flex-md-row');
}

console.log(document.getElementById('nav').classList);
console.log(document.getElementById('navUl').classList);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs tabs-vertical tabs-left" id='nav'>
  <ul class="nav nav-tabs" id='navUl'>
  </ul>
</div>

Вы можете использовать это выражение if, чтобы делать то, что вы хотите.Если вы прикрепите его к событию $(window).resize();, вы можете обновить его, чтобы добавить стили и быстро удалить их.

Answer 2

Вы можете попробовать использовать скрипт mobiledetect.js и, в зависимости от того, какое устройство оно регистрирует, отправить его в другой скрипт CSS, который подойдет для каждого типа устройства (например, для мобильных устройств, ПК и т. Д.)

Скрипт загрузки: http://hgoebl.github.io/mobile-detect.js/