html - 使用媒体查询切换元素显示/可见性

Question

我正在构建一个响应式网站，并且我有两个版本的 Logo 。一个用于移动屏幕尺寸，另一个用于平板电脑/计算机屏幕尺寸。 我正在尝试使用媒体查询让网站在两者之间切换。

我基本上将两个 Logo 放在 div 上，然后使用媒体查询，我将计算机大小的 Logo 设置为显示:当窗口小于或等于 450 像素时无。然后我用相同的查询设置移动 Logo ，除了我这样做是为了如果屏幕大于或等于 450 像素，它的设置为显示:无。

** .cover 是计算机/更大的标志。 **

HTML:

<div id="paralax0">
<div class="cover" style="padding-top:25vh;">
    <img style="width:600px;" src="./img/cover.png">
</div>
<div class="covermobile">
    <img style="width:300px;" src="./img/logo8.png">
</div>
<div class="coverlinks">
    <div class "icon" style="padding: 0px 20px 70px 20px;"><a class="link" href="#"><img src="./img/resume.png"></a></div>
    <div class "icon" style="padding: 0px 20px 70px 20px;"><a class="link" href="#"><img src="./img/mywork.png"></a></div>
</div>
</div>



CSS:

.cover{
  display: flex;
  justify-content: center;
  align-items: center;
}

.covermobile{
  display: flex;
  justify-content: center;
  align-items: center;
}


@media only screen and (max-width: 450px){
.cover{
  display: none;
 }
}

@media only screen and (min-width: 450px){
.covermobile{
  display:none;
 }
}

我希望/期待的是屏幕宽度 <= 450px 使较大的 Logo 消失，只留下移动 Logo 。反之亦然，屏幕宽度 >= 450px 将使移动 Logo 消失，只留下较大的 Logo 。

相反，无论屏幕尺寸如何，较大的 Logo 都保持可见

Answer 1

我正在测试您的代码，一切正常。我认为您的 html 头中缺少此元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">