博客园响应式布局，适合手机端浏览

平时下班公交上无聊，我会不时的看看博客园，虽然博客园现在提供手机网址访问，但是我还是想能不能就吧自己的主页改成手机端能访问的呢！

博客园自己的主页是可以自定义模板什么的，

要修改成响应式布局无非就是从CSS着手，

通过样式定义不同分辨率的布局

我添加的如下：

@media only screen and (min-width: 860px) and (max-width: 1440px) {
	body {
		background-attachment: fixed;
		background-image: url(http://www.5068.com/uploads/allimg/130722/69_130722092657_1.jpg);
	}
	#blogTitle > h2 {
		margin-left: 0em;
	}
	#home {
		width: 90%;
		background: none;
	}
	#main {
		min-width: 320px;
	}
	#mainContent {
		width: 80%;
	}
	#slideBar {
		margin-left: 0%
	}
}
@media only screen and (min-width: 320px) and (max-width: 860px) {
	body {
		background: #FFFFFF;
	}
	#blogTitle > h2 {
		margin-left: 0em;
	}
	.dayTitle{display:none;}
	.postTitle{
		position: relative;
		text-overflow: ellipsis;
		overflow: hidden;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 10px;
	}
	#home {
		width: 100%;
		background: none;
	}
	#main {
		min-width: 100%;
	}
	#mainContent {
		width: 100%;
	}
	#sideBar {
		margin: 0px;
		padding: 0px;
		visibility: hidden;
		display: none;
	}
	#navigator {
		margin-top: 0px;
	}
	#header{margin-top:0px;}
	#navList {
		margin-left: 0px;
	}
	#navList a {
		margin-left: 0px;
		margin-right: 0px;
	}
	#blogTitle{
		display: none;
	}
	.postCon{
		width:100%;
	}
	.day{margin:5px;}
}
.postCon p {
	text-indent: 0em;
}
.postCon img {
	max-width: 100%;
}

　　PC端正常浏览，我这里只是修改了为宽屏加上了背景，
手机端浏览如下图：

 

然后最重要的是插入ViewPort的Meta标签，这个标签不一定要放Head里面，我在博客园的设置，子标题中加入一段viewport的代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

现在你的博客就支持手机端访问了

从这里下载样式文件：http://www.cnblogs.com/blog/customcss/38852.css