Question

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

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

CSS :(我正在使用Skeleton）

.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，因此适用于大于宽度的设备。因此，对于窄于400px的设备，它会使用主width: 10em定义中的.logo标准值。

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

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

绝对元素在纵向模式手机中无响应

1 个答案: