使图像在移动设备上显示在相同位置

时间:2017-08-19 15:42:22

标签: html css

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

实时版http://viralpvp.net/ 使用Pastebin代码:https://pastebin.com/9ibFp84G

我相信这是我出错的部分,但我不确定如果你能提供帮助请告诉我!

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

1 个答案:

答案 0 :(得分:0)

根据我在代码中看到的内容,您使用px的固定值 在桌面上(以及在桌面设计时),它可能看起来不错,但由于手机的宽度不是很多像素,它会根据原始顺序向上或向下推动图像。

基本上你的图片对于移动来说太大了,因为它们的尺寸固定为400px×400px

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

百分比(%)vw之间的差异是百分比是包含正文或容器的相对大小,而vw将始终基于视口。

以下是视口使用的示例 以全屏模式查看示例并调整桌面浏览器的大小,并查看其功能。它会随之调整图像大小。

使用vw,您需要为所有vw内容设置最小宽度和高度,因为它在移动设备上可能会变得太小。为此,请使用min-widthmin-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>