change soon when decreasing screen width

Asked

Viewed 955 times

0

I would like that when the site was seen in cell phones the soon appear smaller, I have two logos, logo1(major) and logo2(minor), how do I so that when the site is opened in a device with screen up to 800px wide the logo1 is changed logo2

logo1

<img  id="minhaImagem" src="img/logo1.png" Alt="logo">

.

. ...jquery code...

.

.

I thank anyone who can help

javascript jquery css3

  • Have you tried with media query? max-width I think solves.

3 answers

1

$(window).on('load', function() {

  if (window.screen.width < 800) { 

    $('#minhaImagem').attr('src','img/logo2.png');

  }

});

With only CSS you can too. But with jquery can do so.

1

Use CSS Media Queries to change the display/layout of the elements depending on the screen size.

When a media query is true, the style layer or corresponding style rules are applied. More information on MDN

In your case, create a div with class logo, in css enter the background with the logo image. Ex.:

HTML:

<div class="logo"></div>

CSS:

<style>

/* Regra geral */
.logo {
    background-image: url("img/logo1.png");
}

/* Regra aplicada quando a largura da tela estiver entre 0px e 800px */
@media (max-width: 800px) 
{
  .logo{
    background-image: url("img/logo2.png");
  }
}

</style>

0

MEDIA QUERY

The method for working with screen widths and responsiveness is the CSS Media Query, and may be applied as follows:

img {
  transition: 0.52s all;
  padding: 25px;
  display: block;
  width: 100px;
  height: 100px;
}

img#minhaImagem2 {
  width: 0px;
  height: 0px;
  padding: 0px;
  opacity: 0;
}

/* Fiz com 500px para poder testar, mas é só trocar para 800px */
@media screen and (max-width: 500px) {
  img#minhaImagem2 {
    width: 100px;
    height: 100px;
    padding: 25px;
    opacity: 1;
  }
  
  img#minhaImagem {
    width: 0px;
    height: 0px;
    padding: 0px;
    opacity: 0;
  }
}
<img  id="minhaImagem" src="img/logo1.png" Alt="logo">
<img  id="minhaImagem2" src="img/logo1.png" Alt="logo 2">

Browser other questions tagged javascript jquery css3

You are not signed in. Login or sign up in order to post.