responsive screen javascript code example
Example: 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) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x)
x.addListener(myFunction)
</script>
</body>
</html>