自己独立设计开发的一个fullpage+css3响应式页面

引入<meta name="viewport" content="width=device-width,initial-scale=1.0">

引入插件和库:

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/slideBox.css">
<!--注意引入顺序，先引入jquery库再引入插件-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>

<!--引入外部文件-->
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">

<!--js代码-->

$(function(){
//1.设置fullpage颜色
$(".main").fullpage({
sectionsColor:["#1bbc9b","#1bbc9b","#1bbc9b","#1bbc9b","#1bbc9b","#1bbc9b"]
});
//2.背景音乐播放
var audiobox=document.getElementById("audiobox");
var audio=document.getElementById("audio");
audiobox.onclick=function(){
if(audio.paused){
audio.play();

}else{

audio.pause();
}

}
//3.图片随机动起来

setInterval(function(){
var num=Math.floor(Math.random()*5+1);
var n=$(".page4 .list").children("img").length-1;
$(".page4 .list").append("<img src=''/>");
$(".page4 .list img:eq("+n+")").attr("src","heart/"+Math.floor(Math.random()*5+1)+".png");

var rand=Math.floor(Math.random()*900);
$(".page4 .list img").animate({

top:rand,
left:rand,
opacity:0,

},3000);

},300)

<!--媒体查询代码-->

@media screen and (max-width:1750px){
.page1 h1{
margin: 100px auto;
}

.page1 .list{
width: 80%;
height:30%;
margin-top: 0;

}
.page1 .list img{
width: 19%;
height: 30%;
}
}
@media screen and (max-width:1678px){

.page2 .list{
width: 75%;
height: 33%;

}
.page2 .list img{
width: 32%;
height: 55%;

}
}
@media screen and (max-width:1207px){
.page1 h1{
margin: -50px auto;

}
.page1 .list{
width: 85%;
height: 30%;
}
.page1 .list img{
width: 19%;
height: 45%;

}
.page3{
background-size:150%;

}
.page3 .list{
width: 89%;
}
.page3 .list img{

width: 22%;
margin: 0 auto;
}
}
@media screen and (max-width:1079px){

.page1 .list img{
width: 18%;

margin: 100px auto;

}
}
@media screen and (max-width:915px){

.page2 h1{
font-size: 30px;
margin: 0px auto;
}
.page2 .bg{
width: 80%;
height: 25%;
margin: 50px auto;
}
.page2 p{
margin-top: 150px;

}
.page2 .list{
width: 85%;
height: 20%;
margin-top:-100px;
}
.page2 .list img{

width: 31%;
height: 50%;
margin: 50px auto;
}

}
@media screen and (max-width: 883px){
.page1 p{
font-size: 20px;
}
.page3{
background-size: 200%;
}

.page3 .list img{
width: 20%;
height: 65%;
}
}
@media screen and (max-width: 749px){
.page1 h1{
font-size: 20px;
}
.page1 p{
font-size: 15px;
}
.page1 .bg{
width: 75%;
}
.page2 p{
font-size: 15px;
}
.page3{
background-size: 250%;
}
.page4 h1{
font-size: 35px;

}
.page4 {
background-size:auto auto;
}
@media screen and (max-width: 687px){
.page1 .bg, .page2 .bg, .page4 .list{
border: 0px;
}
.page1 .bg img,.page2 .bg img{
width: 100%;
height: 80%;

}
.page1 .left, .page1 .right{

width: 30%;
height: 15%;
}
}
.page2 h1{
margin-top:-250px;
}
.page2 .left, .page2 .right{

width: 30%;
height: 15%;
}
.page3{
background-size: 280%;
}
.page3 h1{
font-size: 30px;
}
.page3 .list{
margin-top: 100px;

}
.page3 .list img{
width: 18%;
height: 35%;
}
.page4 .list{
width: 60%;
height: 30%;
}

@media screen and (max-width: 563px){
.page1{
margin-top: 0;
}
.page1 p{
margin-top: 50px;

}
.page1 .list{

width: 90%;
height: 10%;
}
.page1 .list img{
margin-top: 0;
}
}
@media screen and (max-width: 535px){
.page1{
margin-top: ;

}
.page1 p, .page2 p{
display: none;
}

.page1 .list img{
width: 17%;
}

}
@media screen and (max-width: 463px){
.page2 .list img{
width: 28%;
}

}
@media screen and (max-width: 414px){
.page1 .list{
margin-top: -50px;
}
.page2 .list{
margin-left: 50px;
margin-top: 50px;
}
}
@media screen and (max-width: 375px){
.page3 .list{
margin-left: 35px;
}
.page3 .list img{
width: 15%;
}
}
@media screen and (max-width: 360px){
.page1{
margin-top: -100px;
}
.page1 .bg{
width: 45%;
height: 15%;
}
.page1 .list img{
width: 15%;
}
.page2, .page3{
margin-top: 100px;
}
.page3 .list img{
width: 15%;
}

}
@media screen and (max-width: 320px){
.page1 .list{
margin-top:150px;
margin-left: 30px;
}
.page2 h1{
font-size: 15px;
}

.page2 .list{
margin-top: 0;
margin-left: 30px;
}
.page4 h1{
font-size: 15px;
}
.page4{
margin-top: 100px;
}
}

</style>

<!--html代码-->

<div class="main">
<div class="section page1">
<h1>Internet changes our life</h1>
<div class="bg">
<img class="bg_img" src="img/diversification.jpg"/>
</div>

<p class="left">
<p class="left p1"> Wifi together with us</p>
<p class="left p2"> Wifi together with us</p>
<p class="left p3"> Wifi together with us</p>
<p class="left p4"> Wifi together with us</p>
<p class="left p5"> Wifi together with us</p>
</p>
<p class="right">
<p class="right p1"> 4G times already go</p>
<p class="right p2"> 4G times already go</p>
<p class="right p3"> 4G times already go</p>
<p class="right p4"> 4G times already go</p>
<p class="right p5"> 4G times already go</p>
</p>
<div class="list">

<img src="img/search.jpg">
<img src="img/phone2.jpg">
<img src="img/connection1.jpg">
<img src="img/wifi1.jpg">
<img src="img/success.jpg">
</div>
</div>
<div class="section page2">
<h1>We work we run and we achieve success</h1>
<div class="bg">
<img src="img/Internet.jpg">
</div>
<p class="left">
<p class="left p1"> Wifi together with us</p>
<p class="left p2"> Wifi together with us</p>
<p class="left p3"> Wifi together with us</p>
<p class="left p4"> Wifi together with us</p>
<p class="left p5"> Wifi together with us</p>
</p>
<p class="right">
<p class="right p1"> 4G times already go</p>
<p class="right p2"> 4G times already go</p>
<p class="right p3"> 4G times already go</p>
<p class="right p4"> 4G times already go</p>
<p class="right p5"> 4G times already go</p>
</p>
<div class="list">

<img src="img/person.jpg">
<img src="img/running.jpg">
<img src="img/success.jpg">
</div>
</div>
<div class="section page3">
<h1>Internet changes our life</h1>

<div class="list">
<img src="img/password.jpg">
<img src="img/chain.jpg">
<img src="img/pan.jpg">
<img src="img/yangwang.jpg">
</div>
</div>
<div class="section page4">
<h1>Face the future and hug our dream</h1>
<div class="list">
</div>
</div>
</div>
<div id="audiobox">
<audio id="audio" autoplay loop src="music/future.mp3"></audio>

</div>