html - 在手机上查看时图像消失

Question

目前我正在尝试使社交按钮可见但不同于桌面 View 。我的 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 视口(viewport)宽度显然会将整个内容移出屏幕