0

私のページのヘッダー構造は次のとおりです

<header>
        <div class="clouds"></div>
</header>

画面の幅を変えても雲は変わらない。私はそれらをレスポンシブにしたい。CSSでどうすればいいの？

現在、次の CSS コードを使用しています。

header{
    width:100%;
    height:100%;
}

.clouds{
    z-index: -98;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    background: url('../images/clouds.png') repeat-x;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100% !important;
    height: 30%;
    min-width: 960px;
}
4

5 に答える 5

1

高さと幅を追加するべきではありません。これにより、最小限で済みます。

background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;
于 2013-10-04T11:24:21.693 に答える
0

これを行うには、CSS メディア クエリを使用します。

http://css-tricks.com/css-media-queries/

于 2013-10-04T11:21:19.427 に答える
0

応答性のサンプル コードを次に示します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 100%;
        border: 1px solid #555;
        font: 14px Arial;
      background-color:red;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: left;


        display: box;
        box-orient: horizontal;
      }



      .box > div:nth-child(1){ background : #FCC;  -webkit-box-flex: 10;
}
      .box > div:nth-child(2){ background : #CFC;   -webkit-box-flex: 20;
}
      .box > div:nth-child(3){ background : #CCF;   -webkit-box-flex: 30;
}

      .box > div:hover { 
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">

      <div>HTML5</div>
      <div>CSS3</div>
      <div>Javascript API for HTML5</div>
    </div>
  </body>
</html>

デモ: http://jsfiddle.net/TLnC3/

于 2013-10-04T11:24:48.060 に答える