三步完成自适应网页设计

三步完成自适应网页设计

自适应网页设计近来很流行,如果你接触比较少请参见 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实现网页自适应

24 条评论

  1. 微历史2015 年 11 月 11 日下午 3:59 回复

    我正在找,准备做一个栏目,自适应终端

    • snowtraces*2015 年 11 月 11 日下午 4:54 回复

      你这SEO嫌疑比较大,去掉超链接

  2. rong2013 年 09 月 26 日下午 11:54 回复

    学习了,支持一下~

    • Emily2015 年 09 月 01 日上午 10:41 回复

      我也迫切需要学习

      • Emily2015 年 09 月 01 日上午 10:42 回复

        马上就要改成这种

  3. 主题更新很疲惫 – Acora2013 年 03 月 21 日下午 11:50 回复

    […] 查了一些资料略学习了自适应网页设计(资料1、2、3),并且应用在了我现在这个主题上,原来也挺简单的,利用CSS3的Media Queries,就像初级的if语法一样,轻松加愉快。目前在移动设备特别是手机上访问我的博客,效果还挺不错!可这不是结局:我这类人似乎有强迫症似的,不动就不动,一动就有点收不住。。所以还是做小白比较好。本来只是想做主题自适应,可到头来自适应是做好了,但另外还花了不少时间,比如新增加些功能啦,改改外观啦,捣鼓下文章形式啦诸如此类,弄得自己也一身疲惫,只是每天折腾了2、3个小时,可几天下来脸上就冒出了两颗闪亮的痘痘。就这么忽然间我觉得又被自己拖下水了,功能是加不完的,界面是改不完的。得,立马收手吃碗老麻抄手抱成团滚粗到床上去,睡觉! […]

  4. 世奇网2012 年 09 月 29 日上午 9:46 回复

    对程序不太了解,学习下,求回访。

  5. niuhuifei2012 年 07 月 12 日上午 2:53 回复

    楼主这个主题,smashingmagzine呀,呵呵。

  6. dazade2012 年 06 月 22 日下午 3:32 回复

    2楼有试过吗?都可以的。

  7. 安卓游戏下载2012 年 05 月 23 日下午 3:19 回复

    貌似有几个标签是只支持手机的吧 网页好像是不支持的

  8. 伤感语录2012 年 05 月 21 日下午 3:36 回复

    对程序不太了解,学习下

1 2