[英]How to make banner responsive CSS
I have built a banner using this demo: http://andwecode.com/playground-demo/naruto-with-parallax-js/ 我使用此演示创建了横幅: http : //andwecode.com/playground-demo/naruto-with-parallax-js/
I am having problems making it responsive. 我在使其响应能力方面遇到问题。 I have tried changing the values to percentages and from another question to the header CSS to:
我尝试将值更改为百分比,然后将另一个问题更改为标头CSS改为:
#header {width: 960px; background:#34495E;
/* Show in default resolution screen*/
position: relative;
margin:0 auto;
line-height: 1.4em;
}
/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
@media only screen and (max-width: 479px){
#container2 { width: 90%; }
}
Here is the full CSS: 这是完整的CSS:
@import url(http://fonts.googleapis.com/css?family=Gudea:400,400italic,700);
* {margin:0; padding:0;}
body {font-family:'Gudea', Arial, Helvetica, sans-serif; font-size:12px; background:#fff;}
a {text-decoration:none;}
#header {width: 960px; background:#34495E;
/* Show in default resolution screen*/
position: relative;
margin:0 auto;
line-height: 1.4em;
}
/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
@media only screen and (max-width: 479px){
#container2 { width: 90%; }
}
.topNav {background:#253749; width:100%; }
.topNav a {display:block; padding:5px 10px; color:#FFF;}
.topNav a:hover {background:#2B445E; transition:background 0.5s ease}
.headingContainer {width:100%; margin:0px auto; }
.heading {color:#FFF; text-align:center;}
.heading h1 {margin-bottom:10px;}
.heading a {color:#00BFFF;}
.heading P {font-size:14px; margin-bottom:20px;}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
.pull-left {float:left;}
.pull-right {float:right;}
.container {width:100%; height:66px; overflow:hidden; position:relative; margin:0px auto; background:#000;}
.background {background:url(../images/huge_bg.jpg); width:100%; height:66px; }
.layer div {position:absolute;}
.landscape{top:0px; left:-250px;}
.grass{top:0px; left:-350px;}
.leaves{top:0px; left:-400px;}
And the HTML: 和HTML:
<header id="header" class="clearfix">
</header>
<section class="container clearfix">
<ul id="scene" class="scene">
<li class="layer" data-depth="0.00">
<div class="background"></div>
</li>
<li class="layer" data-depth="0.60">
<div class="kurama"><img src="images/kurama.png"></div>
</li>
<li class="layer" data-depth="0.40" data-invert-y="false">
<div class="landscape"><img src="images/landscape.png" /></div>
</li>
<li class="layer" data-depth="0.60">
<div class="grass"><img src="images/grass.png" /></div>
</li>
<li class="layer" data-depth="1.20">
<div class="obito"><img src="images/obito.png"></div>
</li>
<li class="layer" data-depth="1.00">
<div class="minato"><img src="images/minato.png"></div>
</li>
<li class="layer" data-depth="2.30">
<div class="leaves"><img src="images/leaves.png"></div>
</li>
</ul>
</section>
So yeah I got the answer for ya: 是的,我得到了您的答案:
I did the changes base on this SITE DOM & CSS: 我根据此SITE DOM和CSS进行了更改:
//CSS
.headingContainer {
margin: 50px auto;
width: 75%; // changed value from 1024px
}
.btnContainer {
margin: 40px auto 0px;
width: 100%; //changed value from 450px
}
.btn{
display: block;
padding: 10px 30px;
border: 2px solid #0B292D;
font-weight: bold;
color: #00BFFF;
width: 150px;
text-align: center;
background: #1C3044 none repeat scroll 0% 0%;
margin: 10px auto;
//Float left will cancel the display block property
//float: left; --> delete this line
//Change margin-right to margin to align mid
//margin-right: 10px; -- delete this line
}
CHECK IT HERE screenshots in Phone and Tablet 在手机和平板电脑中查看此处的屏幕截图
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.