在移动设备上，使用vh和wh作为响应单位使我的img有了一定的利润

问题描述

我解决了一个响应式设计问题，并介绍了另一个。我制作了很酷的svg，并且其中包含了一些文字。我知道，我知道–我应该通过HTML / CSS添加文本。但是我的网站将于今天到期，并且我在图形上花费了太多时间，因此我无力将SVG变成响应迅速的div。

首先，使用最大宽度100％将使矢量文本在计算机显示器上太大而在移动显示器上太小。我为移动设备优先设计了矢量，因此它是长而垂直的（2300px和3000px）

我设法通过将vh和wh作为单位来解决该难题。

但是现在，图像进入移动视图时会向下移动。移动视图在上方的元素和图片之间引入了空白。

图像div上没有边距，没有填充。上面的元素没有任何元素。身体也没有任何东西。

关于可能引入什么的任何线索吗？

非常感谢您！

HTML

<div class="vector">
        <img class="vector-img" src="dark.svg">
   </div>

CSS

    width: 95wh;
    height: 100vh;
    padding: 0px;
    margin: 0px;

解决方法

首先，您已经设置了两个类“ vector”和“ vector-img”，这可能会引起问题。如果可能，请提供更多代码。您的CSS也有错字，更改宽度：95 wh ；到宽度：95 vh ;

,

请注意，至少在某些手机上，例如iOS vh不一定是视口高度，它是固定高度，因此当用户滚动并且浏览器窗口顶部的部分Chrome消失时，不会突然出现为用户跳转。

这使得很难保持空白，或者在窗口底部切断一些信息。

如果您可以在答案中举一个可行的例子，我们将能够更清楚地了解这是否引起了您的问题。

注意：您正在将宽度设置为wh单位。我怀疑您的意思是大众，但这可能不会引起您所描述的问题。