我们如何使标题的响应高度
[英]How can we make responsive height of header
问题描述
I have the header structure of my page as 
我的页面标题结构为
<header>
<div class="clouds"></div>
</header>
The clouds do not change by the change in width of the screen. 屏幕的宽度不会改变云。 I want to make them responsive. 我想让他们响应。 How can I do with CSS. 如何使用CSS。
I currently use the following CSS Code. 我目前使用以下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;
}
5 个解决方案
解决方案1
1 已采纳 2013-10-04 11:24:21
You should not add the height and width, this should do it at a bare minimum 您不应该添加高度和宽度，这应该做到最少
background: url('../images/clouds.png')
background-repeat:no-repeat;
background-size:contain;
background-position:center;
解决方案2
0 2013-10-04 11:21:19
Use CSS media queries to do this. 使用CSS媒体查询来执行此操作。
http://css-tricks.com/css-media-queries/ http://css-tricks.com/css-media-queries/
解决方案3
0 2013-10-04 11:24:48
Here is sample code for responsiveness: 这是响应性的示例代码：
<!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>
Demo: http://jsfiddle.net/TLnC3/ 演示： http ： //jsfiddle.net/TLnC3/
解决方案4
0 2013-10-04 11:32:36
Your code is working fine for me. 您的代码对我来说很好。 Although you have some bad codes. 虽然您有一些错误的代码。
You dont have to 你不必
header{
width:100%;
height:100%;
}
if your going to make your .cloud 100% width, and the height is not necessary. 如果您要使.cloud的宽度为100％，则不需要高度。
Maybe you thought it's not working because of the min-width. 也许您认为由于最小宽度而无法正常工作。 Which limits your .clouds minimum width. 这限制了.clouds的最小宽度。 So if you are re-sizing it below your min-width. 因此，如果要在最小宽度以下调整其大小。 Your .clouds width doesn't change to your screen size. 您的.clouds宽度不会更改为屏幕大小。
And don't listen to the others who uses media query, for this basic responsiveness you don't have to use media query. 并且不要听其他使用媒体查询的人，因为这种基本的响应能力，您不必使用媒体查询。
解决方案5
0 2013-10-04 11:39:30
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%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.