三步完成自适应网页设计

三步完成自适应网页设计

自适应网页设计近来很流行,如果你接触比较少请参见 responsive sites。当然,对一个新手来说可能听起来有点复杂,其实它比你想象的简单多了。这里是一个快速教程,通过学习你会自适应网页和media queries的基本原理(前提你有css基础)。

查看演示 Demo

Step 1:Meta 标签

为了适应屏幕,不少移动浏览器都会把HTML页面置于较大视口宽度(一般会大于屏幕宽度),你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放:

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

IE8及其更低版本不支持media query,可以使用media-queries.jsrespond.js脚本实现支持。

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

Step 2. HTML结构

在这个例子中,页面布局包括 headercontentsidebar
footerheader固定高度为180pxcontent600pxsidebar300px

Step 3. Media Queries

CSS3 media query是自适应网页设计的关键,他就像高级语言里的if条件语句,告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。

如果视口宽度小于等于980px,下面规则生效。

这里将容器绝对宽度改用百分比显示,让页面排版更加灵活。

/* for 980px or less */
@media screen and (max-width: 980px) {

	#pagewrap{
		width: 94%;
	}
	#content{
		width: 65%;
	}
	#sidebar{
		width: 30%;
	}

}

如果视口宽度小于等于700px, 将#content#sidebar宽度设为自动(auto),并移除它的浮动属性(float),这样它会变成满版显示。

/* for 700px or less */
@media screen and (max-width:700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}

}

当视口宽度小于等于480px时(如手机屏幕),将#header高度设为自动,h1的字体大小设定为24px,并隐藏#sidebar

/* for 480px or less */
@media screen and (max-width:480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}

}

根据你的喜好,可以定义更多的media queriey条件

小结

这里只是一个快速教程,更多可以参见使用CSS3 Media Queries实现网页自适应

20 条评论

  1. ddd2017 年 02 月 15 日下午 10:45 回复

    你的页面就是自适应的,而且挺简洁,不错

  2. 2016 年 12 月 18 日下午 2:28 回复

    博主有推荐学习地方,非常想学这个怎么做网页自适应?谢谢!

    • snowtraces*2016 年 12 月 18 日下午 3:42 回复

      这里不就是教你怎么做吗?

      • 杰克大王2016 年 12 月 27 日下午 4:31 回复

        O(∩_∩)O哈哈~

  3. 唯历史2016 年 11 月 25 日下午 8:14 回复

    感觉还是好难,有完整的例子可以提供吗?我准备修改网站头部

  4. 大锤Tracy2016 年 04 月 13 日上午 9:56 回复

    非常简明易懂。感谢博主!

1 2