Answers for "javascript media query"

media query js

<script>
if (window.matchMedia("(min-width: 600px)").matches) {
  /* La largeur minimum de l'affichage est 600 px inclus */
} else {
  /* L'affichage est inférieur à 600px de large */
}
</script>

Posted by: Guest on November-01-2021

Source

css different sreen size

/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

Posted by: Guest on August-07-2020

Source

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>

Posted by: Guest on April-20-2020