В примере, при изменении ширины контейнера, ему добавляется соответствующий размеру 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;
} |
|
|
