Блог

Главная - Вопросы по программированию - Адаптивный дизайн не работает по некоторым причинам

Адаптивный дизайн не работает по некоторым причинам

#javascript #html #responsive-design

Вопрос:

Я пытаюсь показать другое изображение на своем веб-сайте, когда его видят на компьютерах и телефонах, но по некоторым причинам это просто не работает

 <!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="icon" href="favicon.ico" />
  <style>
    .image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    }
        
    body {
      background-color: rgb(30, 30, 30);
    }
  </style>
  <script>
    if (screen.width < screen.height) {
        document.getElementById("change").src = "phone.png";
    }
  </script>
</head>
<body>
  
  <div class="image">
    <img id="change" src="computer.png" class="image">
  </div>

</body>
</html>

Я совершенно уверен, что то, что я сделал неправильно, крайне глупо, но я просто не могу этого найти, если вы можете мне помочь, я был бы очень благодарен

Комментарии:

1. Я бы предложил для этого использовать CSS. Почему? Потому что он намного легче. Посмотрите на запросы CSS-носителей.

2. Да, используйте для этого CSS. Но чтобы достичь этого с помощью javascript, вы должны addEventListener знать, когда загружается DOM, или просто переместить код js после html, прямо перед </body>

Ответ №1:

Вы также можете сделать это с помощью css.

   .d-large {
    display: block;
  }
  .d-small{
    display:none;
  }

@media only screen and (max-width: 600px) {
  .d-large {
    display: none;
  }
  .d-small{
    display:block;
  }
}

 
 <div class="small">
  <img id="img1" src="computer.png" class="image d-large">
  <img id="img2" src="phone.png" class="image d-small">
</div>

Да, Мартин прав, это не самое лучшее из того, что связано с js.

 window.addEventListener('resize', function(event) {
    if (window.innerWidth < window.innerHeight) {
        document.getElementById("change").src = "computer.png";
    }else {
      document.getElementById("change").src = "phone.png";
    }
}, true);

Комментарии:

1. оооо, спасибо тебе!

Ответ №2:

tbh я тоже не вижу проблемы. Я думаю, вместо того, чтобы использовать это утверждение if, просто используйте @mediaquery и изображение в качестве фонового изображения?

 .image{
    @media screen and (max-width: 700px) {   
        background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
    }
}

Комментарии:

1. обратите внимание, что это как .css недопустимо, @media должно быть упаковкой селектора .image . Это будет работать только в том случае, если оно предварительно обработано как sass/scss

Метки: