BeFor Web
为网而生 - 原创译文博客 - 关注移动、VR及互联网产品的用户体验设计

通过CSS3 Media Query实现响应式Web设计

通过CSS3 Media Query实现响应式Web设计

十一长假已然过去了一大半。今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子。自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些;夜里闭上眼,满脑子就都是Drupal、博客、咖啡、使命召唤、南方公园...也许需要出门走一走了。

OK开始说正经的了。在之前一篇译文中,我们了解了响应式Web设计的概念、组成要素以及基本的实现思路。今天继续相关话题,我们将从前文介绍过的“弹性布局结构”这方面出发,通过一个具体的实例来深入学习。

如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案

范例效果预览

首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。

html5-css3-responsive-web-design-final-demo

更多范例

我(原文作者)使用media query的方式设计了一些WordPress模板,比如TisaEleminSucoiTheme2FunkiMinblrWumblr等。

概述

我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由“固定”方式改为“液态”,布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。

html5-css3-responsive-web-design-design-overview

HTML代码

我们将把注意力集中在页面的主要布局方面,并使用HTML5标签来更加语义化的实现这些结构,包括页头、主要内容部分、侧边栏和页脚:

<div id="pagewrap">

	<header id="header">
		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>
		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>
		<form id="searchform">
			<input type="search">
		</form>
	</header>
	
	<div id="content">
		<article class="post">
			blog post
		</article>
	</div>
	
	<aside id="sidebar">
		<section class="widget">
			 widget
		</section>
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

HTML5.js

IE是永恒的话题;对于我们使用的HTML5标签,IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件:

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

CSS

HTML5块级元素样式

首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点,但还是需要在样式方面做些工作,将这些“新”元素声明为块级:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

主要结构的CSS

忽略细节,我们仍是将注意力集中在大问题上。正如在前文“概述”中提到的,默认情况下页面容器的固定宽度为980像素,页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素,左浮动;侧边栏(sidebar)右浮动,宽度为280像素。

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

截至目前的效果演示

目前我们只是初步完成了页面结构的HTML和默认结构样式,当然,并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的,由于还没有做任何media query方面的工作,页面还不能随着浏览器尺寸的变化而改变布局

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX(上海)
评论 (18)
请教下 我和上面的朋友有同样的问题 ie8没效果呢 在原网站上下的源文件demo在本地看也是没效果的,但是在原网站上看的demo又是有效果的,不知道是什么原因呢?
博客的内容不错啊,会常来关注的,我只能说曾经是个做前端的。现在改打杂了,anyway,很喜欢之类的内容。以后多交流,微博关注你了。呵呵!
谢谢,多多交流的=)
css3-mediaqueries.js案例链接在IE8里起作用,但是照着做一遍本地的在IE8里就不起作用
我试了很久才发现在谷歌和火狐这些浏览器里面@media screen and (max-width: 560px) 这段字符中间的空格特别是and和后面括号的空格即便没有也不要紧,但是加上JS的ie就是不行的,这里纠结了好久。
网站和内容都很棒啊!收藏!
谢谢=)
css3-mediaqueries-js 这个我发觉在ie8没效果呀
同感啊,请问大拿问题解决没,我还是没有解决呢
不支持低版本浏览器吗?IE6.0下没效果呢?
IE8里我这也不显示呢
IE6不支持CSS3相关属性
学习了,3Q
谢谢,欢迎常来交流=)
拜读,谢谢
谢谢支持=)
弹性布局结构 这个链接地址没有,请补上
已更正,谢谢
发表评论