When using media queries in CSS, will the background be loaded for the desktop if the resolution matches the mobile device?

    2 answers 2

    If you have a media query for mobile devices, then the picture will not load for the desktop, if you downloaded the site on your phone or in a small browser window. The same works in the opposite direction.

    Example

     div { height: 512px; width: 512px; background-image: url("http://pngimg.com/uploads/facebook_logos/facebook_logos_PNG19753.png"); } @media screen and (min-width: 240px) and (max-width:830px) { div { background-image: url("http://download.seaicons.com/icons/limav/flat-gradient-social/128/Facebook-icon.png"); } } 
     <div></div>

    You can see for yourself in the tab of the netwrok browser, if you open the page at different resolutions.

    Download result at low resolution

    enter image description here As can be seen from the screenshot, for a small resolution, the corresponding background loaded and no other.

      No, this media request says that the resolution from 500px and above will be a picture 1.jpg

       @media screen and (min-width: 500px) { background-image: url("../img/1.jpg"); }

      and in this, that from 1000px will already be 2.jpg , therefore 1.jpg will not be displayed

       @media screen and (min-width: 1000px) { background-image: url("../img/2.jpg"); }