Быстрый способ связать медиа запросы CSS и код JavaScript.

function isBreakPoint(bp) {
  // Tочки излома, которые установлены в коде CSS
  var bps = [320, 480, 768, 1024];
  var w = $(window).width();
  var min, max;
  for (var i = 0, l = bps.length; i < l; i++) {
    if (bps[i] === bp) {
      min = bps[i-1] || 0;
      max = bps[i];
      break;
    }
  }
  return w > min && w <= max;
}

Использование:

if ( isBreakPoint(320) ) {
  // Ширина экрана меньше точки 320
}
if ( isBreakPoint(480) ) {
  // Ширина экрана между точками излома 320 и 480
}
…

Демонстрация показывает взаимодействие с медиа запросами CSS. Если нажать на прямоугольник, то будет выведено сообщение о типе устройства с текущей шириной экрана. Медиа запросы изменяют цвет прямоугольника, а скрипт формирует правильное сообщение. Очень простой пример с огромным потенциалом.

Добавлено: 18 Апреля 2018 10:14:52 Добавил: Андрей Ковальчук Нравится 0

Добавить