Question

我在扩展响应能力方面存在一些问题。

如果我使用px值，缩放是正确的，并且表现得像我想要的那样。但由于我希望我的移动css与尽可能多的设备兼容，我更喜欢使用％值。问题是，只要我将px值切换到％值，我的图像/内容就会消失或缩放到非常小的比例并更改x＆amp; y位置。

是否有任何已知问题可能导致浏览器难以使用％值？我环顾四周但找不到任何描述我问题的内容。

我的问题示例：

使用px值（正常工作）：JSFiddle demo

.header{
    width: 30%;
    margin: auto;
    position: relative;
}

.logo{
    background-color: #FF0000;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: auto;
}

使用％值（图片消失）：JSFiddle demo

.header{
    width: 30%;
    margin: auto;
    position: relative;
}

.logo{
    background-color: #FF0000;
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: auto;
}

Answer 1

行为绝对正确。当您使用％时，它表示父容器的总宽度的一部分。在您使用％的示例中，您说“占用整个可用区域”。但父容器只设置了宽度。因此，它的宽度为30％，但没有增加高度。如果您将 height：200px; （例如）添加到 .header ，您会看到它按预期工作 - ＆gt; http://jsfiddle.net/krasimir/aMXkg/11/

.header{
  width: 30%;
  height: 200px;
  margin: auto;
  position: relative;
}

  .logo{
    background-color: #FF0000;
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
  }

css中的％值使图像消失

1 个答案: