Question

我的页面标题结构为

<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;
}

Answer 1

你不应该添加高度和宽度，这应该是最低限度

background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Answer 2

使用CSS媒体查询执行此操作。

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

Answer 3

以下是响应能力的示例代码：

<!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/

Answer 4

您的代码对我来说很好。虽然你有一些不好的代码。

你没必要

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

如果您要使.cloud 100％宽度，并且不需要高度。

也许你认为它因为最小宽度而无法正常工作。这限制了你的.clouds最小宽度。因此，如果您在最小宽度以下重新调整尺寸。您的.clouds宽度不会更改为您的屏幕尺寸。

不要听其他使用媒体查询的人，因为这种基本的响应能力，你不必使用媒体查询。

Answer 5

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%;    
}

我们如何才能使标题的响应高度

5 个答案: