html - 使图像出现在移动设备上的相同位置

Question

我已经制作了我的网站并定位了图标，据我所知，它们完全适合桌面，但在移动设备上，它似乎与图标一起出现在背景之下。

现场版http://viralpvp.net/粘贴到代码:https://pastebin.com/9ibFp84G

我认为是这部分出了问题，但我不确定，如果您能提供帮助，请告诉我!

width:400px;
height:400px;
max-width:100%;
vertical-align:middle;
text-align:center;
display:inline-block;

Answer 1

从我在您的代码中看到的情况来看，您使用的是 px 的固定值。
在台式机上(以及在台式机上设计时)它可能看起来不错，但由于手机没有那么多像素宽度，它会根据图像的原始顺序向上或向下插入图像。

基本上你的图片对于移动设备来说太大了，因为它们的大小固定为 400px x 400px

为了解决这个问题，我建议将图像的固定宽度更改为可调整大小的单位。
vw 是可调整大小单元的一个示例。
vw 代表视口(viewport)，它基于屏幕的宽度。
它用 0-100 的数字表示，基本上是百分比。

百分比 (%) 和 vw 的区别在于百分比是包含体或容器的相对大小，而 vw 总是基于视口(viewport)。

以下是视口(viewport)使用示例。
全屏查看示例并调整桌面浏览器的大小，看看它做了什么。它会随之调整图像的大小。

使用 vw，您需要为所有 vw 内容设置最小宽度和高度，因为它在移动设备上可能会变得太小。为此，请使用 min-width 和 min-height。

希望我有所帮助!

标记

#vwTest
  {
  background-color: gray;
  width: 30vw;
  height: 30vw;
  }
  
#vwTest2
  {
  background-color: lightgray;
  width: 50vw;
  height: 50vw;
  }

<div id="vwTest">
 </div>
<div id="vwTest2">
 </div>