Match Media Queries With JavaScript matchMedia Method

In today's video you will know about how we can match media queries using JavaScript

Source Code to Match media Queries with the help of JavaScript


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match Media Queries using Javascript</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
        
        div {
            height: 100px;
            width: 100px;
            background-color: darkCyan;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
<script>
    // javascript code to match media queries
    let media = () => {
        let queries = matchMedia("(max-width:600px)");
        if (queries.matches) {
            document.querySelector("body").style.flexDirection = "column";
        } else {
            document.querySelector("body").style.flexDirection = "row";
        }
    }
    onload = media;
    onresize = media;
</script>

</html>

Useful Links

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)