Вот фрагмент JavaScript, демонстрирующий распространенный метод создания адаптивного дизайна:

// JavaScript snippet for responsive design
// Add an event listener to detect when the window size changes
window.addEventListener('resize', function() {
  // Check the current width of the window
  var windowWidth = window.innerWidth;
  // Perform actions based on the window width
  if (windowWidth < 768) {
    // Code for smaller screens
    console.log('Small screen');
  } else if (windowWidth >= 768 && windowWidth < 1024) {
    // Code for medium screens
    console.log('Medium screen');
  } else {
    // Code for larger screens
    console.log('Large screen');
  }
});

Этот фрагмент добавляет к объекту окна прослушиватель событий, который прослушивает событие resize. Всякий раз, когда размер окна изменяется, выполняется код внутри прослушивателя событий. Он проверяет текущую ширину окна с помощью свойства window.innerWidthи выполняет действия в зависимости от ширины окна.

Например, в приведенном выше коде, если ширина окна меньше 768 пикселей, на консоль выводится «Маленький экран». Если ширина находится в диапазоне от 768 до 1024 пикселей, регистрируется «Средний экран», а при большей ширине — «Большой экран». Вы можете заменить операторы console.logнужным вам кодом, чтобы сделать ваш дизайн адаптивным.