元视口 - 如何在 PC 和移动设备上以相同的方式显示 div 的背景？

Question

我的页面中有元视口：

<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 在不移除元视口的情况下在计算机和移动设备上具有相同的背景大小吗？

Answer 1

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

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

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

元视口 - 如何在 PC 和移动设备上以相同的方式显示 div 的背景？

meta viewport - how to show div's background in the same way on pc and mobile?

css

meta