18 |
30 |
31 |
32 | mediaCheck is a simple wrapper around matchMedia to run code on entry and exit from media queries. Version 1 drops support for browsers without matchMedia support. If you need to support older browsers, you can use an older version.
33 |
34 |
46 |
47 | Demo
48 |
49 |
50 |
51 |
Examples
52 |
53 |
54 | mediaCheck({
55 | media: '(max-width: 420px)',
56 | entry: function() {
57 | console.log('starting 420');
58 | },
59 | exit: function() {
60 | console.log('leaving 420');
61 | },
62 | both: function() {
63 | console.log('changing state');
64 | }
65 | });
66 |
67 |
68 |
69 |
70 | import mediaCheck from './mediaCheck';
71 |
72 | const demo = document.querySelector('.demo-area');
73 |
74 | function smallScreen(mq) {
75 | if (mq.media)
76 | demo.innerText = 'This is a smaller screen.';
77 | demo.classList.add('green');
78 | demo.classList.remove('blue', 'orange');
79 | }
80 |
81 | function largeScreen(mq) {
82 | debugger;
83 | if (document.body.offsetWidth >= 900) {
84 |
85 |
86 |
87 |
88 | demo.innerText = 'This is a larger screen.';
89 | demo.classList.add('orange');
90 | demo.classList.remove('blue', 'green');
91 | console.log(demo.classList);
92 | }
93 | }
94 |
95 | function dude(mq) {
96 | demo.innerText = "Dude, that's a really big screen.";
97 | demo.classList.add('blue');
98 | demo.classList.remove('orange', 'green');
99 | }
100 |
101 | mediaCheck({
102 | media: '(min-width: 900px)',
103 | entry: largeScreen,
104 | exit: smallScreen
105 | });
106 |
107 | mediaCheck({
108 | media: '(min-width: 1200px)',
109 | entry: dude,
110 | exit: largeScreen
111 | });
112 |
113 |
114 |
117 |
Options
118 |
119 |
120 | media
121 | Type: string
122 | This is the mediaquery that will trigger the specified action. It should be in the form:
123 |
124 |
125 | (min-width: 420px)(min-width: 35em)(max-width: 800px)(max-width: 60em)
130 |
131 |
132 |
133 | entry
134 | Type: function
135 | Params: mq The media query object
136 | This function will execute once when the mediaquery becomes active.
137 |
138 |
139 |
140 | exit
141 | Type: function
142 | Params: mq The media query object
143 | This function will execute once when the mediaquery becomes inactive.
144 |
145 |
146 |
147 | both
148 | Type: function
149 | Params: mq The media query object
150 | This function will execute once when the mediaquery changes state.
151 |
152 |