Practice with the matchMedia method


by Jeremy Caudle
code

Media queries in CSS are extremely handy and essential when building websites nowadays. I wondered if it was possible to make use of them in some way using JavaScript, and luckily the always handy MDN Web Docs introduced me to the matchMedia method.

Current Orientation:

The text above should change as you rotate your device from portrait to landscape. This is done with JavaScript and the matchMedia() method. I believe this could be done using two spans and CSS media queries as well, but today I wanted to try out using this method. ;)

View the code:

HTML and JS 
<section class="code-block">
            <h1>Current Orientation: <span id="orientationText"></span></h1>
            <p>The text above should change as you rotate your device from portrait to landscape. This is done with JavaScript and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia">matchMedia()</a> method. I believe this could be done using two spans and CSS media queries as well, but today I wanted to try out using this method. <strong>;)</strong></p>
        </section>
        <script>
            let mql = window.matchMedia('(orientation: landscape)');
            console.log(mql);

            if(mql.matches) {
                    document.querySelector('#orientationText').innerText = 'Landscape';
                } else {
                    document.querySelector('#orientationText').innerText = 'Portrait';
                }

            mql.addEventListener('change', () => {
                console.log('Orientation updated.');
                if(mql.matches) {
                    document.querySelector('#orientationText').innerText = 'Landscape';
                } else {
                    document.querySelector('#orientationText').innerText = 'Portrait';
                }
            });

            
        </script>
CSS 
section.code-block {
                width: clamp(16em, 90vw, 60em);
                background: #ddd;
                border-radius: 1rem;
                margin: 3rem auto;
                padding: 1rem;
                text-align: center;
                display: grid;
                place-items: center;
                min-height: 50vh;
                font-family: Helvetica, Arial, sans-serif;
            }
						
						section.code-block h1 {
								font-size: 1.5rem;
						}

            .code-block p {
                max-width: 60ch;
                margin: 1rem auto;
                text-shadow: 0 2px rgba(0, 0, 0, .125);
                line-height: 1.5;
            }

            .code-block p a, .code-block p a:visited {
                color: white;
                font-weight: 600;
            }

            @media (orientation: landscape) {
                section.code-block{
                background-image: linear-gradient(red, orange);
                color: white;
                }
            }

            @media (orientation: portrait) {
                section.code-block{
                background-image: linear-gradient(rgb(0, 102, 255), rgb(0, 160, 27));
                color: white;
                }
            }

Tags