javascript responsive code example

Example 1: js media query

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p>If the viewport is less than, or equal to, 700 pixels wide, the background color will be yellow. If it is greater than 700, it will change to pink.</p>
<p><strong>Resize the browser window to see the effect.</strong></p>

<script>
function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
   document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
</script>

</body>
</html>

Example 2: responsive html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Example 3: make it responsive

<div id="gallery">
            <div class="showcase-images">
                <div class="showcase-block">
            <img id="show-img" src="images/showcase/tabs.png" alt="Tabs">
            </div>
            </div>
            <nav>
            <ul id="main">
                <li id="tabs"><a href="#">Tab</a></li>
                <li id="login"><a href="#">Login</a></li>
                <li id="forum"><a href="#">Forum</a></li>
            </ul>
        </nav>
        </div>

Tags:

Html Example

Recent Posts