Форум программистов, компьютерный форум, киберфорум
mrtoxas
Войти
Регистрация
Восстановить пароль
Оценить эту запись

Имитация медиа-запросов для конкретного элемента (Element Queries)

Запись от mrtoxas размещена 30.06.2020 в 14:38
Обновил(-а) mrtoxas 30.06.2020 в 15:53
Метки html, js, resizeobserver

В примере, при изменении ширины контейнера, ему добавляется соответствующий размеру data-атрибут, который можно использовать для стилизации самого контейнера или вложенных\соседних блоков.

HTML5
1
2
3
<div class="wrapper" id="wrap" data-mq="">
  <div class="block"></div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const mq = {
  sm: 200,
  md: 400,
  lg: 600
};
 
const element = document.getElementById("wrap");
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    processingMq(entry.contentRect.width);
  }
});
 
resizeObserver.observe(element);
 
const processingMq = function (w) {
  switch (true) {
    case w < mq.sm:
      element.dataset.mq = "xs";
      break;
    case w < mq.md:
      element.dataset.mq = "sm";
      break;
    case w < mq.lg:
      element.dataset.mq = "md";
      break;
    case w >= mq.lg:
      element.dataset.mq = "lg";
      break;
    default:
      element.dataset.mq = "";
  }
};
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrapper {
  width: 200px;
  height: 100px;
  padding: 10px;
  background-color: #e6e2eb;
  resize: horizontal;
  overflow: auto;
  margin-bottom: 10px;
}
 
.block {
  width: 100%;
  height: 40px;
  background-color: #563d7c;
}
 
.wrapper[data-mq="sm"] .block {
  width: 150px;
  margin: 0 auto;
}
 
.wrapper[data-mq="md"] .block {
  width: 300px;
  margin: 0 auto;
}
 
.wrapper[data-mq="lg"] .block {
  width: 100px;
  margin: 0 auto;
}
resizeObserver поддерживается не всеми браузерами, но в сети есть полифилы.
Размещено в Верстка, JavaScript
Просмотров 129 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.