Question

我正在建立一个自适应网站，我有两个版本的徽标。一个用于移动屏幕尺寸，另一个用于平板电脑/计算机屏幕尺寸。我试图使用媒体查询在网站之间切换。

我基本上将两个徽标放在彼此顶部的div上，然后使用媒体查询，即将计算机尺寸徽标设置为显示：当窗口小于或等于450px时不显示。然后，我用相同的查询设置了移动徽标，但我没有这样做，因此，如果屏幕大于或等于450px，则将其设置为display：none。

** .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使较大的徽标消失，仅留下移动徽标。反之亦然，屏幕宽度> = 450px将使移动徽标消失，仅留下较大的徽标。

无论屏幕大小如何，较大的徽标始终可见

Answer 1

我正在测试您的代码，并且一切正常。我认为您在html头中缺少此meta标签。

SELECT nc.id, nc.name
  FROM night_club as nc
    INNER JOIN visitor_night_clubs as vnc ON nc.id = vnc.night_clubs_id 
    WHERE vnc.visitors_id = 3;

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

1 个答案: