php怎么做响应式,CSS3怎么做出响应式布局

今天给大家带来一个用CSS3做出来的响应式布局的案列，需要的朋友可以拿去借鉴使用，响应式是CSS3的一个特色，我们熟练掌握后手机端和PC端都可以熟练的使用。

*{padding: 0;margin: 0;}

html,body{width: 100%;height: 100%;background:url(img/bj.jpg) ;background-size: 100% 100%;}

#nav{width: 560px;height:40px ;margin: 10px auto;}

ul,li{list-style: none;}

.list{width: 560px;height: 40px;background: #fff;}

.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

}

.list li:nth-child(1){

background: url(img/1.png) top;

}

.list li:nth-child(2){

background: url(img/2.png) top;

}

.list li:nth-child(3){

background: url(img/3.png) top;

}

.list li:nth-child(4){

background: url(img/4.png) top;

}

.list li:nth-child(5){

background: url(img/5.png) top;

}

.list li:nth-child(6){

background: url(img/6.png) top;

}

.list li:nth-child(7){

background: url(img/7.png) top;

}

.list li:nth-child(8){

background: url(img/8.png) top;

}

.list li:hover{

background-position: bottom;

}

@media only screen and (min-width: 640px) and (max-width: 980px) {

#nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}

ul,li{list-style: none;}

.list{width: 67px;height: 400px;background: #fff;}

.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

}

}

@media only screen and (min-width: 100px) and (max-width: 640px) {

#nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}

ul,li{list-style: none;}

.list{width: 67px;height: 400px;background: red;}

/*.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

background: #fff;

}*/

.list li:nth-child(1){

background: url(img/1.png) top;

}

.list li:nth-child(2){

background: url(img/2.png) top;

}

.list li:nth-child(3){

background: url(img/3.png) top;

}

.list li:nth-child(4){

background: url(img/4.png) top;

}

.list li:nth-child(5){

background: url(img/5.png) top;

}

.list li:nth-child(6){

background: url(img/6.png) top;

}

.list li:nth-child(7){

background: url(img/7.png) top;

}

.list li:nth-child(8){

background: url(img/8.png) top;

}

.list li:hover{

background-position: bottom;

}

.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

border-radius: 50%;

}

}

以上就是一个响应式布局的案例，更多精彩请关注php中文网其它相关文章！

相关阅读：