绝对元素在纵向模式下无响应 phone

Question

我有一个绝对 DIV 位于页面顶部。我让它具有响应性，因此它在较小的设备上变得更小并且它似乎可以工作（在笔记本电脑和手机的横向模式下）除了手机上的纵向模式（我在 iPhone 和三星上测试过）。我不知道它可能是什么。它似乎不听@media 查询，只有当我在@media 查询之外更改实际 div 的宽度和高度时，它才会变小。

您可以在此处查看 div：http://f4g.marilnu149.149.axc.nl/index.html（左上角的徽标）

CSS：（我正在使用骨架）

.logo {
  position: absolute;
  margin-top: 0;
  margin-left: 50px;
  width: 10em;
  height: 10em;   
  background: #201616; /* Old browsers */
  background: -moz-linear-gradient(top,  #201616 0%, #7c1b1b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #201616 0%,#7c1b1b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #201616 0%,#7c1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#201616', endColorstr='#7c1b1b',GradientType=0 ); /* IE6-9 */
}

.logo img {
  max-width: 100%;
}

/* Larger than mobile */
@media (min-width: 400px) {
  .logo {
    width: 4em;
    height: 4em;
  }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
  .logo {
    width: 4.5em;
    height: 4.5em;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {
  .logo {
    width: 5em;
    height: 5em;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {
  .logo {
    width: 8em;
    height: 8em;
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  .logo {
    width: 10em;
    height: 10em;
  }
}

HTML:

<div class="logo">
  <img src="images/logo.png" />
</div>

提前感谢任何可以提供帮助的人！

Answer 1

据我所知，您没有为小于 400px 的设备设置任何@media。您所有的 @media 查询都说 min-width，因此申请宽度大于的设备。因此，对于小于 400 像素的设备，它在您的主要 .logo 定义中使用 width: 10em 的标准值。

因此，一种选择是简单地将您的主要定义更改为小于 10em 的值，例如3em:

.logo {
  position: absolute;
  margin-top: 0;
  margin-left: 50px;
  width: 3em;
  height: 3em;
  …
}

绝对元素在纵向模式下无响应 phone

Absolute element not responsive in portrait mode phone

css

android

ios

responsive-design

responsive