css - meta viewport - 如何在 pc 和移动设备上以相同的方式显示 div 的背景？

Question

我的页面中有元视口(viewport):

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

还有一个div中的背景图片，我想在电脑和手机上以同样的方式显示图片。问题是，在移动设备上它比计算机大得多，如下图所示:

#mydiv{
 width:100%;
 height:150px;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 50% 50%;
 background-image:url(myurl.jpg);
}

有什么想法可以让我的 div 在不删除元视口(viewport)的情况下在计算机和移动设备上具有相同的背景大小吗？

Answer 1

您可以将移动高度设置得更小。

@media (min-width: 400px) and (max-width: 768px) {  
    #mydiv{
        height:75px;
    }
}

您可以设置任意数量的尺寸以覆盖大量尺寸的屏幕。请记住，并非所有计算机屏幕的尺寸都相同。