Адаптивность скрипта

237

28 июля 2017, 02:02

Есть следующая строка в скрипте:

$('#timeline').css('margin-left', -(num-1)*10 + "%"); //сдвигаем таймлан на текущую точку*ширину элемента влево

Мне нужно, чтобы на ширине меньше 1200px вместо 10 давалось 5, меньше 962px - 0, к примеру. То есть как медиа запросы в CSS, только в JS.

Answer 1

Можно сделать так: вводим вместо 10 переменную и определяем ее в зависимости от размера экрана:

var vari; 
 
function variChange(winWidth) { 
  if (winWidth > 1200) { 
    vari = 10; 
  } 
  if (winWidth <= 1200 && winWidth > 962) { 
    vari = 5; 
  } 
  if (winWidth <= 962) { 
    vari = 0; 
  } 
  console.log(vari); // для демонстрации 
} 
variChange($(window).width()); // $(window).width() - ширина экрана

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Также можно продублировать вызов функции определения переменной в событие .resize() - тогда переменная будет изменяться при непосредственном изменении размера экрана.

var vari; 
 
function variChange(winWidth) { 
  if (winWidth > 1200) { 
    vari = 10; 
  } 
  if (winWidth <= 1200 && winWidth > 962) { 
    vari = 5; 
  } 
  if (winWidth <= 962) { 
    vari = 0; 
  } 
  console.log(vari); // для демонстрации 
} 
variChange($(window).width()); // $(window).width() - ширина экрана 
$(window).resize(function() { 
  variChange($(window).width()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если же вам не нужна поддержка IE9 и ниже, можете использовать window.matchMedia():

var vari; 
 
function variChange(winWidth) { 
  if (window.matchMedia("(min-width: 1200px)").matches) { 
    vari = 10; 
  } 
  if (window.matchMedia("(max-width: 1200px)").matches) { 
    vari = 5; 
  } 
  if (window.matchMedia("(max-width: 962px)").matches) { 
    vari = 0; 
  } 
  console.log(vari); // для демонстрации 
} 
variChange($(window).width()); // $(window).width() - ширина экрана 
$(window).resize(function() { 
  variChange($(window).width()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

https://developer.mozilla.org/ru/docs/Web/API/Window/matchMedia

if(window.matchMedia('(max-width: 1200px)').matches)
{
  // код будет работать на экранах с шириной 1200 и меньше
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как правильно использовать transition?

ЗдравствуйтеДелаю меню под телефон

294

CSS

Как убрать подчеркивание у ссылки?

ЗдравствуйтеНавешал такие обработчики:

349

CSS

Проблема с transition на элементе слайдера с position: absolute;

ЗдравствуйтеПытаюсь сделать слайдер на сайте

310

CSS

Ошибка в изменение высоты блока. Не хочет принимать 100%

Проблема в том, что раскрывается резко, а вот в обратную сторону работает как надо

355