2

応答性のために要素をスケーリングする際に問題が発生しています。

px 値を使用している場合、スケーリングは正しく、希望どおりに動作します。しかし、モバイル CSS をできるだけ多くのデバイスと互換性を持たせたいので、% 値を使用することをお勧めします。問題は、px 値を % 値に切り替えるとすぐに、画像/コンテンツが消えるか、非常に小さい比率にスケーリングされ、x & y 位置も変更されることです。

ブラウザーが % 値で苦労する原因となる既知の問題はありますか? 周りを見回しましたが、私の問題を説明するものは見つかりませんでした。

私の問題の例:

  • px 値を使用 (正常に動作): JSFiddle デモ

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

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

  • % 値あり (画像が消える): JSFiddle デモ

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

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

    1 に答える 1

    6

    動作は完全に正しいです。% を使用すると、親コンテナーの合計幅の一部を意味します。% を使用する例では、「利用可能な領域全体を取る」と言います。ただし、親コンテナーには幅が設定されているだけです。したがって、幅は 30% になりますが、高さは追加されません。高さを追加する場合: 200px; (たとえば) .headerに対して、期待どおりに動作することがわかります -> 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;
  }
    于 2013-08-26T10:06:20.030 に答える