Как сделать так, чтобы CSS-спрайты выравнивались вертикально для мобильных устройств - PullRequest
Новая
       8

Как сделать так, чтобы CSS-спрайты выравнивались вертикально для мобильных устройств

0 голосов
/ 04 июля 2018

Я использую два CSS-спрайта (каждый в своем собственном div) для отображения логотипа Android и Apple на моей домашней странице. Он выглядит хорошо, когда на ноутбуке, однако, он не выравнивается правильно (в центре) при просмотре на меньшем устройстве, то есть на мобильном устройстве / небольшом браузере.

Может ли кто-нибудь протянуть руку и помочь мне настроить Sprites вертикально при просмотре на мобильном телефоне?

Вот как это выглядит в полноэкранном и мобильном / небольшом браузере:

** Полноэкранный режим (рабочий): **

enter image description here

** Мобильный (не работает): **

enter image description here

Вот мой 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;
  }

1 Ответ

0 голосов
/ 04 июля 2018

Используйте @ media для css. 

@media all and (max-width: 400px)
{
    .nav-android a, .nav-ios a {
        float: none;
        display: block;
        background-size: 128px 128px;
    }
}

Edit: Может быть, вам нужно добавить это в голову: 

<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>
...