Использование Resize Observer для адаптивного дизайна

На этой неделе я наткнулся на чрезвычайно мощный API/хук под названием «Resize Observer». Короче говоря, Resize Observer дает вам возможность отображать на странице совершенно разные элементы в зависимости от того, в каких размерах она просматривается. Например, если ваш экран имеет ширину более 1200 пикселей, Resize Observer даст вам возможность отобразить совершенно другой блок div, чем если бы он был меньше 1200 пикселей, и то же самое может быть даже для менее 900 пикселей или дополнительных подразделений 300 пикселей. Отзывчивый дизайн, очевидно, является огромной частью сборки веб-приложений для обеспечения единообразия внешнего вида на разных устройствах и платформах, и с его помощью вы не только сможете добиться этой согласованности, но, надеюсь, увидите потенциал запуска совершенно разных элементов или компонентов в зависимости от размера экрана. , так как все понятие наблюдаемого размера экрана, по сути, является прослушивателем событий.

ПРИМЕР

Вот пример того, как Resize Observer может изменять внешний вид в зависимости от размеров экрана. Вот два раздела, вложенные в div, стилизованные для обеспечения контраста:

Вот как это выглядит при размере экрана примерно в четверть всего поля экрана (на моем мониторе около 600 пикселей). Когда мы расширяем экран до полного размера, вот что мы получаем:

Удивительно (и изменение в контейнере, и капибара, балансирующая на голове с клементином), верно?

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

Во-первых, вот функция addPhoto:

function addPhoto() {
  if (!document.querySelector('.two img')) {
    let img = document.createElement('img')
    img.src = 'http://redd.it/xkifu5yylqx41.jpg'
    img.alt = 'capybara'
    document.querySelector('.two p').appendChild(img)
  }
} 

Довольно понятно. Далее у нас есть функция removePhoto:

function removePhoto() {
  let img = document.querySelector('.two img')
   img?.parentElement.removeChild(img)
}

«?» это то, что называется «необязательная цепочка». По сути, это означает, что перед выполнением следующего блока кода он проверит, существует ли элемент, чтобы предотвратить любые ошибки, которые могут быть вызваны отсутствием определения.

Далее у нас есть функция handleResize, которая включает в себя две вышеупомянутые функции:

function handleResize(entries) {
  let div = entries[0].target
  if (entries[0].contentRect.width > 900) {
    div.classList.add('big')
    addPhoto()
  } else {
    div.classList.remove('big')
    removePhoto()
  }
}

Несколько вещей, которые нужно охватить в этом:

• Записи передаются в качестве аргумента, но ссылаются на массив возможных элементов, которые можно наблюдать на странице.
• Цель entry[0] — это div, содержащий два раздела, с которыми мы работаем.
• «Большой», добавленный в classList, добавляет совершенно новый класс в div, поэтому изменение порядка и цвета показано на скриншотах, которые я сделал.

Последняя часть — добавление прослушивателя событий с инициализацией Resize Observer для отслеживания изменений внутри контейнера:

document.addEventListener('DOMContentLoaded', () => {
  let resizer = new ResizeObserver(handleResize)
  resizer.observe(document.querySelector('.container'))
})

HandleResize передается в качестве аргумента для аргумента Resize Observer и указывает, что нужно обращать внимание на изменения размера контейнера!

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

Спасибо за чтение.