我已经制作了我的网站并定位了图标,以便它们完全适合桌面,据我所知,但在移动设备上,它似乎与背景下的图标一起出现。
实时版http://viralpvp.net/ 使用Pastebin代码:https://pastebin.com/9ibFp84G
我相信这是我出错的部分,但我不确定如果你能提供帮助请告诉我!
width:400px;
height:400px;
max-width:100%;
vertical-align:middle;
text-align:center;
display:inline-block;
答案 0 :(得分:0)
根据我在代码中看到的内容,您使用px
的固定值
在桌面上(以及在桌面设计时),它可能看起来不错,但由于手机的宽度不是很多像素,它会根据原始顺序向上或向下推动图像。
基本上你的图片对于移动来说太大了,因为它们的尺寸固定为400px×400px
为了解决这个问题,我建议将图像的固定宽度更改为可调整大小的单位
可调整大小单元的一个示例是vw
vw
代表视口,基于屏幕的宽度
它以数字表示,从0到100,基本上是百分比。
百分比(%)
和vw
之间的差异是百分比是包含正文或容器的相对大小,而vw
将始终基于视口。
以下是视口使用的示例 以全屏模式查看示例并调整桌面浏览器的大小,并查看其功能。它会随之调整图像大小。
使用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>