一个月的ps基础课程教学终于结束，网站也好久没有更新了，今天学生们准备项目汇报的作品，我忙里偷闲赶紧来更新一下。

响应式布局几乎是现在网页设计的标配，能在不同的屏幕宽度下显示不同的效果，而不用准备不同的html和css版本，还是非常不错的。

利用媒体查询media queries可以很好的实现这个效果。

这个案例是仿了网易轻量博客lofter的一个页面，很简单实用。不过移动端的导航菜单没有做，个人网站改版的时候加上了移动端导航菜单的效果。

ps：已经更新了移动端导航菜单的效果，改变浏览器窗口可以看到菜单的变化。

不断改变浏览器窗口，可以看到页面的变化。

查看案例

下载案例

链接：https://pan.baidu.com/s/1ggoQQuZ 密码：pxuz

一、案例知识点

1、百分比布局

2、media queries的应用

3、移动端导航菜单的制作

二、HTML源代码

<header>
	<div id="top" class="clearfix">
        <div id="logo" class="fl"><img src="images/logo.png"></div>
        <div id="mobile-menu" class="fr"><span></span></div>
        <nav class="menu fl">	
            <ul class="clearfix">
            	<li><a href="#">首页</a> / </li>
                <li><a href="#">联系</a> / </li>
                <li><a href="#">归档</a> / </li>
                <li><a href="#">提问</a> / </li>
                <li><a href="#">RSS</a></li>
            </ul>
        </nav>
    </div>
</header>
<main>
   <div id="products">
    	<ul class="clearfix">
         <li><a href="#"><img src="images/1.jpg" /></a></li>
         <li><a href="#"><img src="images/2.jpg" /></a></li>
         ……
      </ul>
 </div>
</main>

三、主要的CSS代码

#top{
	padding-left:2%;
	min-height:50px;}
#logo{
	width:30%;}
#logo img{
	width:100%;
	min-width:135px;}
#mobile-menu{
	display:none;}
.menu{
	margin-top:3%;}
.menu li{
	float:left;
	margin-right:0.5em;}
#products li{
	float:left;
	width:24.25%;
	margin-right:1%;
	margin-bottom:1%;}
#products li:nth-child(4n){
	margin-right:0;}
#products img{
	width:100%;}
#footer{
	padding:2% 1% 3%;}
#aboutme span{
	margin-top:2px;}


@media screen and (max-width:1024px){
#products li{
	width:32.66%;}
#products li:nth-child(4n){
	margin-right:1%;}
#products li:nth-child(3n){
	margin-right:0;}
#footer {
	font-size:0.875rem;}
	}
@media screen and (max-width:900px){
#aboutme,#copyright{
	float:none;
	margin-bottom:1%;}
	}
@media screen and (max-width:768px){
#top{
	position:relative;
	padding:1% 5% 1% 1%;}
#mobile-menu{
	display:block;
	margin-top:3%;
	}
#mobile-menu span{
	display:block;
	width:20px;
	height:14px;
	position:relative;
	}
#mobile-menu span::before,#mobile-menu span::after{
	content:"";
	display:block;
	width:20px;
	height:2px;
	background-color:#666;
	position:absolute;
	left:0;
	top:0;
	transition:all 0.2s linear;
	}
#mobile-menu span::after{
	bottom:0;
	top:auto;
	}
#mobile-menu.menu-rotate span::before{
	top:7px;
	transform:rotate(-45deg);
	
	}
#mobile-menu.menu-rotate span::after{
	top:7px;
	bottom:auto;
	transform:rotate(45deg);
	}
.menu{
	position:absolute;
	right:0;
	top:71.34px;
	display:none;
	background:rgba(0,0,0,.7);
	margin-top:0;
	width:100%;
	padding:2% 5%;}
.menu li{
	float:none;
	padding:0.5em 0;}
.menu a{
	color:#fff;}
	}
@media screen and (max-width:480px){
#products li{
	width:49.5%;}
#products li:nth-child(3n){
	margin-right:1%;}
#products li:nth-child(2n){
	margin-right:0;}
.menu{
	top:50px;}
#footer{
	font-size:0.75rem;}
	}

四、JavaScript代码

<script>
$(function(){
	$("#mobile-menu").click(function(){
		$(this).toggleClass("menu-rotate");
		$(".menu").slideToggle(500);
		})
	})
</script>