What is the equivalent of CSS media queries in Javascript?

Question

When I want to apply certain style according to screen size, I usually use CSS media queries.

Example:

@media only screen and (max-width : 768px) {

    .container {
       width:960px;
    }

}

I wonder if in Javascript there is something similar to these CSS features.

Answer 1

You can use the Window.matchMedia() for this. See the example below.

if (window.matchMedia("(min-width:800px)").matches) {
  /* a viewport tem pelo menos 800 pixels de largura */
  console.log('a viewport tem pelo menos 800 pixels de largura')
} else {
  /* a viewport menos que 800 pixels de largura */
  console.log('a viewport menos que 800 pixels de largura')
}

About media print, there was a bug in Firefox in its version 13.

References:

• $(window). width() not the same as media query
• MDN - Window.matchMedia()
• MDN - Mediaquerylist

Answer 2

You can check the screen size and make changes with css, see:

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

//tamano da tela
var size = screen.width;


if(size < 3000){
    document.getElementById("demo").style.color = "blue";
  }

#demo{
  color: red;
}

<div id="demo"></div>

Answer 3

I believe that there is no equivalent solution in javascript, however, there are ways to arrive at convenient results.

The first form would be the combination of the event that detects changes in the width of the window, together with a check of the desired width:

window.onresize = function(event) {
  if (window.innerWidth < 768) {
    console.log("Largura da janela menor que 768 px");
  }
};

The second way would be using the method window.matchMedia, as the example below:

if (window.matchMedia("(min-width: 500px)").matches) {
  console.log("A viewport tem pelo menos 500 pixels de largura");
} else {
  console.log("A viewport tem menos que 500 pixels de largura");
}

And through this question in the Soen, found that there is a plugin with the proposal to do the equivalent of CSS media queries in javascript:

https://github.com/paulirish/matchMedia.js/

Answer 4

I believe the recommended solution is to add a Event Listener at the MediaQueryList as explained on the page https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

var mql = window.matchMedia('(max-width: 600px)');

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = 'This is a narrow screen — less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* the viewport is more than than 600 pixels wide */
    para.textContent = 'This is a wide screen — more than 600px wide.';
    document.body.style.backgroundColor = 'blue';
  }
}

mql.addListener(screenTest);