html - 如何使 CSS Sprites 为移动设备垂直对齐
问题描述
我正在使用两个 CSS Sprite(每个都在自己的 div 中)在我的主页上显示 Android 和 Apple 徽标。在笔记本电脑上看起来不错,但是在较小的设备(即移动设备/小型浏览器)上查看时,它不能正确对齐(在中心)。
任何人都可以帮助我在移动设备上查看时让 Sprites 垂直对齐吗?
这是它在全屏和移动/小型浏览器中的样子:
**全屏(工作):**
**手机(不工作):**
这是我的 HTML:
<body>
<div class="main-container">
<div class="left-image">
<nav class="site-nav">
<ul class="group">
<li class="nav-android"><a href="#">Android</a></li>
</ul>
</nav>
</div>
<div class="right-image">
<nav class="site-nav">
<ul class="group">
<li class="nav-ios"><a href="#">iOS</a></li>
</ul>
</nav>
</div>
</div>
</body>
这是我的CSS:
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
position: relative;
list-style: none;
margin-top: 150px;
left: 20%;
}
.site-nav a {
display: inline-block;
text-align: center;
width: 300px;
height: 350px;
text-indent: 9999px;
overflow: hidden;
}
.nav-android a {
float: left;
left: 50%;
background-position: 0 0px;
background-image: url(../images/android.png);
background-repeat: no-repeat;
}
.nav-ios a {
float: left;
left: -50%;
background-position: 0 0px;
background-image: url(../images/apple.png);
background-repeat: no-repeat;
}
@media screen and (max-width: 700px) {
.nav-android a,
.nav-ios a,
{
width: auto;
float: none;
}
解决方案
将@media用于 css。
@media all and (max-width: 400px)
{
.nav-android a, .nav-ios a {
float: none;
display: block;
background-size: 128px 128px;
}
}
编辑:也许您需要将其添加到头部:
<meta name="viewport" content="width=device-width, user-scalable=0"/>
ul { margin: 0; padding: 0; }
.group { margin-top: 10%; text-align: center; }
.group li { display: inline-block; }
.group li a { display: block; width: 256px; height: 256px; font-size: 0; }
.nav-android a {
background-size: 100%;
background-image: url(android.png);
background-repeat: no-repeat;
background-color: green;
}
.nav-ios a {
background-size: 100%;
background-image: url(apple.png);
background-repeat: no-repeat;
background-color: grey;
}
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<div class="main-container">
<ul class="group">
<li class="nav-android"><a href="#">Android</a></li>
<li class="nav-ios"><a href="#">iOS</a></li>
</ul>
</div>
</body>
</html>
推荐阅读
- ffmpeg - ffmpeg filtergraph描述中的文件索引3无效
- google-apps-script - 使用 Google 脚本在另一张完整表格的公式中搜索和替换
- javascript - 有没有一种方法可以在 sprite.svg 文件组件上应用 javascript?
- jenkins - 詹金斯并行调用从文件加载的外部函数
- spring-boot - 即使在 MqttConnectOptions 中将自动重新连接设置为 true,Eclipse Paho MqttClient 也无法重新连接
- influxdb - 从 influxdb 2.0 中删除数据
- sql - 同一张表的SQL递归查询
- docker - 如何重用 docker-compose 并启动并运行多个实例?
- python - 标称值的标签编码
- php - PHP 在 foreach 循环中简化 array_push