Code to show screen resolution

You can get the resolution of the screen with window.innerWidth , and play this value within div with:

document.querySelector("#resolucao").innerHTML = window.innerWidth;

document.querySelector("#resolucao").innerHTML = window.innerWidth;

<div id="resolucao"></div>

Object screen

I believe you are looking for the screen object in javascript. It gives you the resolution of the screen where the window is.

// escrevendo a resulução no console
console.log('Total width/height: ' + screen.width + 'x' + screen.height);
// escrevendo dentro de um div
document.getElementById('idDoDivQueMostraResolucao').innerHTML = 'Total width/height: ' + screen.width + 'x' + screen.height;

Media Query

However, you do not need to use this, you can put the media query in the CSS itself. This approach also has the advantage of working when the user is disabled with javascript. So you will not even need a CSS file for each resolution.

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Responsive images

In the case of images, there are still other modes, introduced in HTML5, which do not require the use of CSS or Javascript, leaving everything for the browser.

srcset and sizes

The new attributes of the img , srcset , and sizes tag are used by the browser to select the best image depending on the resolution. In the example below, the browser downloads only the image that best fits a certain scenario:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
           800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

With these attributes in place, the browser will:

• Look at the width of your device (screen).
• Find which media condition in the size list ( atributo sizes ) is the first to be true.
• Note the size of the slot provided with this media query.
• Loads the referenced image in the srcset list that best matches the size chosen.

picture

This tag is used, for example, in cases where an image looks good on the desktop in landscape mode, but in a portrait mode phone it does not look cool. Here you create another image for the portrait mode to look better.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

In older browsers, new attributes and tags are just ignored.

More information

• link
• link
• link
• link

With jquery

  

With this solution besides taking the width of the device will load the appropriate CSS

Library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Script

functionadjustStyle(width){//larguradodispositivowidth=parseInt(width);//imprimealarguranadivdeidsizeWidth$("#sizeWidth" ).text(width);

  //apenas um exemplo
  if (width < 701) {
    $("#size-stylesheet").attr("href", "style700.css");
  } else if (width < 900) {
    $("#size-stylesheet").attr("href", "style900.css");
  } else {
     $("#size-stylesheet").attr("href", "styleMaior900.css"); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

HTML

<link id="size-stylesheet" rel="stylesheet" type="text/css" href="" />
<div id="sizeWidth"></div>