Question

我已经完成了我正在处理的网页，但不幸的是，我只为1920x1080显示器设计了它。每当在其他窗口大小/显示器分辨率上查看站点时，页面都无法正确调整。有人可能会修复此问题，以便在更改窗口大小或在移动设备上查看页面时相应地缩放页面吗？如果任何人都可以修改代码以便它可以适应任何浏览器端，那就太棒了。我已经做了一段时间了。这是整个页面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vortex Network</title>
</head>
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<script>
window.onresize = function(event) {
    ...
}
</script>
<script>
    (function(){
      /**
        author: @manufosela
        2013/08/27    copyleft 2013

        ShootingStar class Main Methods:
          launch: launch shooting stars every N seconds received by param. 10 seconds by default.
          launchStar: launch a shooting star. Received options object by param with:
             - dir (direction between 0 and 1)
             - life (between 100 and 400)
             - beamSize (between 400 and 700)
             - velocity (between 2 and 10)
      **/

      ShootingStar = function( id ) {
        this.n = 0;
        this.m = 0;
        this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 };
        this.options = {};
        id = ( typeof id != "undefined" )?id:"";
        this.capa = ( $( id ).lenght > 0 )?"body":id;
        this.wW = $( this.capa ).innerWidth();
        this.hW = $( this.capa ).innerHeight();
      };

      ShootingStar.prototype.addBeamPart = function( x, y ) {
        this.n++;
        var name = this.getRandom( 100, 1 );
        $( "#star"+name ).remove();
        $( this.capa ).append( "<div id='star"+name+"'></div>" );
        $( "#star"+name ).append( "<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>" );
        if ( this.n > 1 ) $( "#haz" + ( this.n - 1 ) ).css( { color:"rgba(255,255,255,0.5)" } );
        $( "#haz" + this.n ).css( { top: y + this.n, left: x + ( this.n * this.options.dir ) } );
      }

      ShootingStar.prototype.delTrozoHaz = function() {
        this.m++;
        $( "#haz" + this.m ).animate( {opacity:0}, 75 );
        if ( this.m >= this.options.beamSize ) { $( "#ShootingStarParams" ).fadeOut( "slow" ); }
      }

      ShootingStar.prototype.getRandom = function( max, min ) {
        return Math.floor( Math.random() * (max - min + 1)) + min;
      }

      ShootingStar.prototype.toType = function ( obj ) {
        if ( typeof obj === "undefined" ) { return "undefined"; /* consider: typeof null === object */ }
        if ( obj === null ) { return "null"; }
        var type = Object.prototype.toString.call( obj ).match( /^\[object\s(.*)\]$/ )[1] || '';
        switch ( type ) {
          case 'Number': if ( isNaN( obj ) ) { return "nan"; } else { return "number"; }
          case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase();
        }
        if ( typeof obj === "object" ) { return "object"; }
        return undefined;
      }

      ShootingStar.prototype.launchStar = function( options ) {
        if ( this.toType( options ) != "object" ) { options = {}; }
        this.options = $.extend( {}, this.defaultOptions, options );
        this.n=0;
        this.m=0;
        var i=0, l=this.options.beamSize,
            x=this.getRandom( this.wW - this.options.beamSize - 100, 100 ), y=this.getRandom( this.hW - this.options.beamSize - 100, 100 ),
            self = this;
        for( ; i<l; i++ ) { setTimeout( function(){ self.addBeamPart( x, y ); }, self.options.life + ( i * self.options.velocity ) ); }
        for( i=0; i<l; i++ ) { setTimeout( function(){ self.delTrozoHaz() }, self.options.beamSize + ( i * self.options.velocity ) ); }
        $( "#ShootingStarParams" ).html();
        $( "#ShootingStarParams" ).fadeIn( "slow" );
      }

      ShootingStar.prototype.launch = function( everyTime ) {
        if ( this.toType( everyTime ) != "number" ) { everyTime = 2; }
        everyTime = everyTime * 1000;
        this.launchStar();
        var self = this;
        setInterval( function() {
          var options = {
            dir: ( self.getRandom( 1, 0 ))?1:-1,
            life: self.getRandom( 400, 100 ),
            beamSize: self.getRandom( 700, 400 ),
            velocity: self.getRandom( 10, 4 )
          }
          self.launchStar( options );
        }, everyTime );
      }

})();

</script>
   </div>
<style type="text/css">
#top-image {

    background:url('https://www.14denoviembre.es/img/stars_5.png') -25px -50px;
    position:fixed ;
    top:0;
    width:100%;
    height:100%;
    background-size: calc(100% + 50px);
    z-index:98;
}

body { 
    color:#FFF; 
    height:55%; 
    width:100%; 
    height:100%; 
    color:#FFF;
    min-width:100%; 
    width: auto !important;
 }

.stars {
    position: absolute;
    background-image: url( http://www.14denoviembre.es/img/hori.png ), url( http://www.14denoviembre.es/img/stars_5.png ); 
    background-repeat: repeat-x,repeat-x repeat-y;
    transform:translate3D(0em, 0em, 0); 
    animation: stars 21s ease; 
    transform-style: preserve-3d;

      }

.Icon {

    width: 100%;
    height: 19%;
    top: 5px;
    position: fixed;
    padding: 10px;
    display: block;
    margin:auto;
    align-content: center;

}


.container {
    position: relative;
    top: 0px;
    text-align: center;
}
#logo {
    height:auto;
}


.shadowfilter {
    -webkit-filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.80));
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;

}

.shadowfilter:hover {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 179, 0.8));
}

#thumbs {   
    position: relative;
    width: 52%;
    margin-top: 30%;
    margin-left: auto; 
    margin-right: auto;
    z-index: 10000;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.status {   
    position: relative;
    height: 5%;
    margin: auto;
    width: 27%;
    border: 3px  solid #ffffff;
    text-align: center;
    -moz-box-shadow:    inset 0 0 75px #ffffff;
   -webkit-box-shadow: inset 0 0 75px #ffffff;
    box-shadow:         inset 0 0 75px #ffffff;
    z-index:99;

   }

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 5;
}
.floating{
    float: left;
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;

}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);    }    
}

@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}    
}


.scaling{
    float: center;
    -webkit-animation-name: scalex;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -moz-animation-name: scale;
    -moz-animation-duration:3s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease-in-out;
}

    @-webkit-keyframes scalex{
        from {-webkit-transform: scale(0.9);}
        65% {-webkit-transform: scale(1.0);}
        to {-webkit-transform: scale(0.9);}    
    }

    @-moz-keyframes scale{
        from {-moz-transform: scale(0.9);}
        65% {-moz-transform: scale(1.0);}
        to {-moz-transform: scale(0.9);}    
    }
.zoom_img img{  
-moz-transition:-moz-transform 0.2s ease-in; 
-webkit-transition:-webkit-transform 0.2s ease-in; 
-o-transition:-o-transform 0.2s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(1.1); 
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}
p {
    font-family: 'Luckiest Guy', cursive;
      -webkit-text-stroke: 3px black;
       color: #ae00de;
       font-size: 2.6em;
       margin:0px;
}
</style>
<body class="stars">
<div class="zoom_img">
    <div id="thumbs">
    <a href="http://vortexpvp.com/forum" id="single_image1"><img class="shadowfilter" src="http://s15.postimg.org/i03eeyw23/Forums_After.png" alt="Forums_Icon"/></a>


    <a href="http://vortexpvp.com/vote" id="single_image2"><img class="shadowfilter" src="http://s15.postimg.org/vshtalmtn/Vote_After.png" alt="Vote_Icon"/></a>

    <a href="http://vortexpvp.com/donate" id="single_image3"><img class="shadowfilter" src="http://s15.postimg.org/j4xgkciiz/Store_After.png" alt="Shop_Icon" height="200" width="190"/></a>

    <a href="http://vortexpvp.com/members" id="single_image4"><img class="shadowfilter" src="http://s15.postimg.org/ds8m67umj/Staff_After_2.png" alt="Staff_Icon" height="200" width="200"/></a>

    <a href="http://vortexpvp.com/bans" id="single_image5"><img class="shadowfilter" src="http://s15.postimg.org/5vo4xzj63/Bans_After_2.png" alt="Bans_Icon"/></a>

    <span class="stretch"></span>
</div>
</div>

<div class="container">
<div class="Icon">
<img src="http://files.enjin.com/353719/module_header/10950667/background/Vortex-Network-Logonew.png" class="scaling" width="642" height="460"></img>
</div>
</div> 
<div class="status">
<p>play.vortexpvp.com</p>
</div>
    <div id="top-image"></div>
    <div id="ShootingStarParams"></div>
    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="ShootingStarClass.js"></script>
    <script type="text/javascript">
      $( document ).ready( function(){
        var shootingStarObj = new ShootingStar( "body" );
            shootingStarObj.launch();
      });
    </script>
</div>
</body>
</html>

提前感谢您的帮助！

Answer 1

使用 CSS3 @media规则

您应该将 CSS3 @media规则应用于您网站中包含的所有元素，

例如你有一个#top-image style css：

magnitude of its corresponding row vector

如果视口宽度为480像素或更宽，它将改变#top-image的最大宽度和高度。

在将语法应用到您的网站之前了解语法：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

网页大小调整有问题

1 个答案: