在手机上查看时图像消失了

Question

目前我正在尝试使社交按钮可见，但与桌面视图不同。我的HTML是：

#facebook {
    position: fixed;
    top: 47vw;
    left: 50vw;
}
    
#facebook img {
    width: auto; 
    height: 1.25vw;
    position: absolute;
}
    
@media only screen and (max-width: 768px) {
    #facebook img { 
        width: auto; 
        height: 4.5vw;
        position: absolute;
    }

@media only screen and (max-width: 768px) {
    #facebook { 
        top: 160vw;
        left: 50vw;
    }
}

<a href="https://www.facebook.com/" target="_blank">
    <div id="facebook">
        <img class="fb" src="images/facebook.png" alt="Facebook" />
    </div>
</a>

编辑：通过将vw更改为百分比

来修复它

Answer 1

您的错误在于：

#facebook { 
    top: 160vw;
    left: 50vw;
}

将其更改为：

#facebook { 
    top: 0vw;
    left: 0vw;
}

顶部为160视口宽度显然会将整个事物移出屏幕

Answer 2

我认为你的宽度：自动造成了麻烦！ 你有没有尝试过添加min-width和min-height？

 #facebook img {
 min-width: 20px;
 min-height: 20px;
 }

Answer 3

vw相对于视口宽度的1％*和 vh相对于视口*高度的1％

@media only screen and (max-width: 768px) {
   #facebook { 
     top: 160vw;
     left: 50vw;
   }
}

这里160vw太大了，这就是为什么图像超出了视口的原因。