时间戳

首页 > 解决方案 > 响应式设计由于某些原因不起作用

javascript - 响应式设计由于某些原因不起作用

问题描述

当我在电脑和手机上看到它时，我试图在我的网站上显示不同的图像，但由于某些原因它不起作用

<!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>

我很确定我做错了什么是非常愚蠢的，但我就是找不到，如果你能帮助我，我将不胜感激

标签： javascripthtmlresponsive-design

解决方案

你也可以用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>

是的，Martin 是对的，这不是 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);

推荐阅读