Change banner according to screen size?

Question

Change banner according to screen size?

Aiming for the best load time performance of my site I wanted to make the homepage banner smarter.

For screens up to 1600px would have to be loaded a banner simpler, lower quality and smaller side size since it does not have to be larger, but for screens larger than that I would bring a banner with more details and better resolution.

insert the description of the image here

Assuming I had a <img id="banner"> like could you make this move to change the src dynamically?

Is this common on websites nowadays?

3

css resolução-de-tela imagem

Author: Dirty Old Man, 2015-04-10

Source

2 answers

score 5 · Answer 1

Yes quite normal. you can handle in CSS or js layers. Nowadays js offers a lot of screen resize support, with components in jquery ui. if you need to change size, BG, and component layout, I suggest you use CSS as follows:

#div{
   width: 600px;
   position: relative;
   margin: 10px auto;
}
@media (max-width:960px){
#div{
     width: 450px;
     margin: 0; 
    }
 }
 @media (min-width:480px){
#div{
     width: 100%;
     margin: 0; 
    }
 }

So you can make " if " species within css for each maximum or minimum screen size. overwriting only what is changed from the pardrão css. Tools like Bootstrap help you manipulate on-screen elements with CSS base already written and quite responsive to standard screen sizes.

score 2 · Answer 2

If you want to do in javascript:

// convém estar no onload da janela
window.onload = function()
{

  // primeiro tens de sacar a dimensão da janela
  // neste caso a área visível do browser
  var largura = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

  // depois é brincar com if's e colocar o banner que queiras:

  if(largura>=1600)
  {
    // mete o banner com mais detalhe
  } else {
    // mete o banner com menos detalhe
  }
} // fim do window.onload