使用CSS媒体查询正确的方式使视差网站响应？

Question

我建立了一个视差网站。

这是演示链接。从我发布问题之日起，链接应该保留一周（至少）。 http://divizbeta.in.s3-website-ap-southeast-1.amazonaws.com/

因此，它适用于1366px到768px的视口分辨率。现在，当我减小屏幕宽度时，问题就出现了。因为宽度减小，高度增加。 skrollr数据属性以百分比定义，例如

<div id="wizard-1" style="-o-backface-visibility:hidden;-o-perspective:1000;"
data-0p="position:absolute;top:13%;left:35%;" 
data-50p="position:absolute;top:45%;left:60%;" 
data-100p="position:absolute;top:86%;left:105%;">
   	<img src="img/02.png" alt="">
</div>

So, this is fine for 768px height and 1366px. But when height increases, the percentage does not change responsively. So, with greater height, the html element simply does not / cannot have the same effect has that in 1366px.

One work around for this that I thought was, if I can define different skrollr divs for different resolutions and then hide and unhide the skrollr divs using CSS media queries. Something like this:

<!-- moon shadow on water -->		
<div id="moon-shadow-for-plus800px" class="island-bg-6" style="position:absolute;z-index:99999999999;left:-30%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);" 
data-0="position:absolute;z-index:99999999999;left:-30%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);"
data-2100p=""
data-3100p="position:absolute;z-index:99999999999;left:-32%;top:0%;-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);"
data-4100p="position:absolute;z-index:99999999999;left:-34%;top:2%;-ms-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5);"
data-4600p="position:absolute;z-index:99999999999;left:-36%;top:5%;-ms-transform:scale(1.6);-webkit-transform:scale(1.6);transform:scale(1.6);">
	       	  	<img src="img/night bg/4.png" alt="">
</div>
	       	
<!-- moon shadow on water -->		
<div id="moon-shadow-for-1000px" class="island-bg-6" style="position:absolute;z-index:99999999999;left:-50%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);" 
data-0="position:absolute;z-index:99999999999;left:-50%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);"
data-2100p=""
data-3100p="position:absolute;z-index:99999999999;left:-52%;top:0%;-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);"
data-4100p="position:absolute;z-index:99999999999;left:-54%;top:2%;-ms-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5);"
data-4600p="position:absolute;z-index:99999999999;left:-56%;top:5%;-ms-transform:scale(1.6);-webkit-transform:scale(1.6);transform:scale(1.6);"
>
 	<img src="img/night bg/4.png" alt="">
</div>

<!-- moon shadow on water -->		
<div id="moon-shadow-for-900px" class="island-bg-6" style="position:absolute;z-index:99999999999;left:-60%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);" 
data-0="position:absolute;z-index:99999999999;left:-60%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);"
data-2100p=""
data-3100p="position:absolute;z-index:99999999999;left:-62%;top:0%;-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);"
data-4100p="position:absolute;z-index:99999999999;left:-64%;top:2%;-ms-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5);"
data-4600p="position:absolute;z-index:99999999999;left:-66%;top:5%;-ms-transform:scale(1.6);-webkit-transform:scale(1.6);transform:scale(1.6);">
    <img src="img/night bg/4.png" alt="">
</div>
	       	
<!-- moon shadow on water -->		
<div id="moon-shadow-for-800pxless" class="island-bg-6" style="position:absolute;z-index:99999999999;left:-70%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);" 
data-0="position:absolute;z-index:99999999999;left:-70%;top:0;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);"
data-2100p=""
data-3100p="position:absolute;z-index:99999999999;left:-72%;top:0%;-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);"
data-4100p="position:absolute;z-index:99999999999;left:-74%;top:2%;-ms-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5);"
data-4600p="position:absolute;z-index:99999999999;left:-76%;top:5%;-ms-transform:scale(1.6);-webkit-transform:scale(1.6);transform:scale(1.6);">
	<img src="img/night bg/4.png" alt="">
</div>

然后CSS就是这样：

    @media only screen and (min-width:1100px) and (max-width:1243px){
    .pegasus{
    	width:70%;
    	position:absolute;
    	top:10%;z-index:9;left:15%;
    }
    .pegasus img{
    	position:relative;
    	left:-1%;width:100%;
    }
    .blue-band{
    	width:100%;
    	position:absolute;top:80%;
    	background-color:transparent;z-index:9;
    }
    
    #moon-for-800px,#moon-shadow-for-800pxless,#moon-for-900px,#moon-shadow-for-900px,#moon-for-1000px,#moon-shadow-for-1000px{
    	display:none;visibility:hidden;
    }
    #moon-for-plus800px,#moon-shadow-for-plus800px{
    	display:block;visibility:visible;
    }
    }
    
    @media only screen and (min-width:1000px) and (max-width:1099px){
    .pegasus{
    	width:70%;
    	position:absolute;
    	top:0%;z-index:9;left:15%;
    }
    .pegasus img{
    	position:relative;
    	left:-1%;width:100%;
    }
    .blue-band{
    	width:100%;
    	position:absolute;top:83%;
    	background-color:transparent;z-index:9;
    }
    
    #moon-for-800px,#moon-shadow-for-800pxless,#moon-for-900px,#moon-shadow-for-900px,#moon-for-plus800px,#moon-shadow-for-plus800px{
    	display:none;visibility:hidden;
    }
    
    #moon-for-1000px,#moon-shadow-for-1000px{
    	display:block;visibility:visible;
    }
    }
    
    @media only screen and (min-width:900px) and (max-width:999px){
    .pegasus{
    	width:70%;
    	position:absolute;
    	top:5%;z-index:9;left:15%;
    }
    .pegasus img{
    	position:relative;
    	left:-1%;width:100%;
    }
    .blue-band{
    	width:100%;
    	position:absolute;top:85%;
    	background-color:transparent;z-index:9;
    }
    
    #moon-for-800px,#moon-shadow-for-800pxless,#moon-for-plus800px,#moon-shadow-for-plus800px,#moon-for-1000px,#moon-shadow-for-1000px{
    	display:none;visibility:hidden;
    }
    #moon-for-900px,#moon-shadow-for-900px{
    	display:block;visibility:visible;
    }
    }
    
    @media only screen and (min-width:800px) and (max-width:899px){
     #moon-for-plus800px,#moon-shadow-for-plus800px
    ,#moon-for-900px
    ,#moon-shadow-for-900px
    ,#moon-for-1000px
    ,#moon-shadow-for-1000px{
        	display:none;visibility:hidden;
        }
     #moon-for-800px,#moon-shadow-for-800pxless{
        	display:block;visibility:visible;
        }
    .pegasus{
    	width:70%;
    	position:absolute;
    	top:20%;z-index:9;left:15%;
    }
    .pegasus img{
    	position:relative;
    	left:-1%;width:100%;
    }
    .blue-band{
    	width:100%;
    	position:absolute;top:87%;
    	background-color:transparent;z-index:9;
    }
    }

这里，div＃moon-for-resolution是使用CSS响应定义的。 所有这些只是为了使视差效应得到响应。 那么，这看起来是解决我的问题的正确方法。 或者有什么方法可以思考我不知道的事情吗？ 是否有一种java脚本方式可以解决它？ 如果是，那么有人可以指导我编写脚本算法吗？ 请指导。非常感谢。:)