尝试一下响应式布局

所谓响应式布局(Responsive Design),就是让网页针对不同设备的浏览器“响应”出不同的显示效果,于是抽了点时间把博客做成了响应式布局,适应一下移动浏览器。

响应式布局主要依赖于 CSS3 的媒体查询特性,其原理就是根据浏览器宽度或高度,适配不同的 CSS,以达到改变页面布局的目的。例如,当浏览器宽度小于 640px 时,将一些不太必要的元素隐藏,在有限的屏幕上显示更多主要的内容。

例如,如下 CSS 只在浏览器宽度小于或等于 640px(iPhone 的屏幕宽度) 的时候才会生效:

@media screen and (max-width:640px) {
	/* 页面宽度设置为 100% */
	body #container {
		width : 100%;
	}

	/* 文章内容区域,宽度设置为 100% */
	body #container #content {
		width : 100%;
	}

	/* 隐藏不怎么有用的搜索框 */
	body #container #content #header nav form {
		display : none;
	}

	/* 隐藏侧边栏 */
	body #container #content #secondary {
		display : none;
	}
}

桌面浏览器上的效果:

响应式设计

移动浏览器上的效果:

响应式设计

实际上还有许多细节地方需要适配,但主要原理就是这样。

Posted on 2013-07-31

1 Comment

  • 大喇叭 大喇叭 about 4 years ago

    上面代码加到CSS里面就可以了么

Leave a Comment