Question

我使用此演示制作了横幅：http://andwecode.com/playground-demo/naruto-with-parallax-js/

我在使其响应时遇到问题。我已经尝试将值更改为百分比，并从另一个问题更改为标题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%; }
}

这是完整的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;}

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>

Answer 1

所以是的，我得到了答案：

我根据这个SITE DOM＆amp; CSS：

<appender name="DEBUG_LOG_FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
    <filter class="ch.qos.logback.classic.filter.ThresholdFilter">
        <level>DEBUG</level>
    </filter>
    <file>c:\programy\apache-tomcat-8.0.26\logs\audioguide-debug.log</file>
    <append>true</append>
    <rollingPolicy class="ch.qos.logback.core.rolling.FixedWindowRollingPolicy">
        <fileNamePattern>c:\programy\apache-tomcat-8.0.26\logs\audioguide-debug.log.%i.zip</fileNamePattern>
        <minIndex>1</minIndex>
        <maxIndex>20</maxIndex>
    </rollingPolicy>
    <triggeringPolicy class="ch.qos.logback.core.rolling.SizeBasedTriggeringPolicy">
        <maxFileSize>20MB</maxFileSize>
    </triggeringPolicy>
    <encoder>
        <pattern>%d [%thread] %-5level %logger | %msg%n</pattern>
    </encoder>
</appender>

电话和平板电脑中的

CHECK IT HERE屏幕截图

如何制作横幅响应式CSS

1 个答案: