使用CSS3媒体查询技术创造响应式设计

标签: CSS3 HTML5 构建 | 发表时间:2012-04-24 13:48 | 作者:alon
出处:http://varhi.com

显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大。用户浏览网页的的设备也不仅仅是桌面电脑了。现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站。因此传统的固定宽度的设计的方法将不再适用。网页设计需要更广的适应性。布局需要能自动适应的分辨率和解析设备。下面的教程将会大家展示如何通过HTML5和 css3 的媒体介质查询技术 创建跨浏览器的响应式设计,

View Demo Responsive Design

Download Demo ZIP

看效果先

在我们开始之前,先让我们看看最终的效果 final demo。缩放你的浏览器来看其布局的基于视窗的变化。

overview

更多的例子

If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.

概要

页面容器的宽度为980px,这样的宽度对分辨率大于1024px的设备来说是比较合适的。媒体介质查询技术将会检测视窗是不是小于980像素的宽度,然后布局将会从固定宽度的布局转换成流动布局(fluid width)。当视窗小于650px时,将会扩展内容容器和边栏为全部宽度时期成为单独一列布局。

overview

HTML 代码

在这里我就不赘述HTML代码了。下面就是主要的布局结构。这里有一个 “pagewrap” 容器,包含 “header”,“content”,“siderbar”和“footer”。

<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

请注意我在例子中使用了html5标签。IE9一下的浏览器将不支持这些标签元素,比如<header;><article;><footer;><figure;>等等。包含 html5.js 文件将会是这些浏览器明白这些新元素。

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

CSS

将新HTML5元素初始化为块元素

下面的css代码将会初始化HTML5元素为块元素(article, aside, figure, header, footer, etc.)。

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

主结构CSS

和上面一样,这里就不再赘述css的细节了。主“pagewrap”容器的宽度是980px,头部设置一个固定的高度160px。“content”容器设置为600px并且左浮动,“sidebar”容器280px宽右浮动。

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

#header {
	height: 160px;
}

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

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

#footer {
	clear: both;
}

Demo

下面就是设计的例子。请注意媒体查询技术还没有被使用。当你缩放浏览器窗口是,你将看不到布局的缩放。

css3 媒体查询那些事

下面就到了最有意思的地方-媒体介质查询 media queries

引入媒体查询javascript库

IE8和更老的浏览器不支持css3的媒体查询。你可以通过加入 css3-mediaqueries.js 让其在这些低版本的浏览器中生效。

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

加入媒体查询

为媒体查询创建一个新的样式表文件。请查看我的上一篇教程,了解如何使用媒体查询技术 media queries

<link href="media-queries.css" rel="stylesheet" type="text/css">

小于980px的视窗是使用流布局(Fluid Layout)

小于980px的视窗时,下面的规则生效:

  • pagewrap = reset width to 95%
  • content = reset width to 60%
  • sidebar = reset width to 30%

技巧:使用百分比的值,让其容器自适应。

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

视窗小于650px时(一列布局)

接下来,我们创建另一个css文件,应用于视窗小于650px的时候。

  • header = 将高度重置为 auto
  • searchform = 重新定位搜索表单,将其放在距顶5像素的位置。
  • main-nav = 将其位置重置为static
  • site-logo = 将其位置重置为static
  • site-description = 将其位置重置为static
  • content = 将其宽度重置为auto (这样可以将其容器扩展到整个宽度) 并且去掉浮动
  • sidebar = 将宽度重置为100%并且清除浮动。
@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

视窗小于480px时

下面的样式将会应用于视窗最大为480时,这个宽度刚好是Iphone竖屏时的宽度。

  • html = 取消文字大小调整功能。通常,iPhone将会将文字变大,以便于更方便阅读。你可以将这个属性关闭通过增加-webkit-text-size-adjust: none 的方法.
  • main-nav = 将其文字的大小调整为90%
@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

灵活的图像

为了使图片更灵活,我们可以简单的增加 max-width:100% 和 height:auto 属性。图像 max-width:100% 和 height:auto 在IE7中能很好的工作,但是在IE8中却不可以(这确实是IE的Bug)。为了修复这个问题,你可能需要增加 width:auto\9 来针对IE8 hack。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入视频

为了让嵌入的视频更灵活,我们也会使用上面的技巧。因为未知的原因,max-width:100%(针对嵌入的元素)并不被Safari所支持。在这方面我们可以用 width:100% 来替代。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

初始化meta标签

通常,iPhone Safari 浏览器会缩放HTML页面来适应iPhone的屏幕。下面的 meta 标签将会告诉iPhone Safari 浏览器去使用设备的宽度来作为视窗的宽度,而不去初始的缩放。

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

最终效果

final demo

查看最终效果,然后缩放你的浏览器看效果。别忘记在iPhone,iPad,Blackberry上面查看效果,使用 Android 手机查看移动版本。

总结

1.媒体查询技术的向后兼容

css3-mediaqueries.js 能够使不支持媒体查询技术的浏览器支持这种技术。

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

媒体介质查询技术

通过使用css根据视窗宽度来覆盖布局结构,创造出响应式设计的技巧。

@media screen and (max-width: 560px) {

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

	#sidebar {
		width: 100%;
		float: none;
	}

}

灵活的图片

使用 max-width:100% 和 height:auto 来使图片更灵活。

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

灵活的嵌入媒体

使用 width:100% 和 height:auto 使嵌入的视频更灵活。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

Webkit 浏览器文本缩放:

使用 -webkit-text-size-adjust:none 禁用iPhone 浏览器的文本缩放功能。

html {
	-webkit-text-size-adjust: none;
}
重置 iPhone 视窗 和 初始缩放

下面的meta标签将会在iPhone重置视窗和初始缩放:

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

中文原文: 使用CSS3媒体查询技术创造响应式设计
英文原文: Responsive Design with CSS3 Media Queries
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

相关 [css3 媒体 技术] 推荐:

使用CSS3媒体查询技术创造响应式设计

- - 收集分享互联网资源!
显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大. 用户浏览网页的的设备也不仅仅是桌面电脑了. 现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站. 因此传统的固定宽度的设计的方法将不再适用. 布局需要能自动适应的分辨率和解析设备.

8个应该了解的CSS3技术

- XcessLeo - 伯乐在线 -博客
   注:本文由敏捷翻译- 宋彩珺翻译自Jean-Baptiste Jung的博文. 如需转载,请参照文章末尾处的声明.    有了CSS3,网站开发及网站设计都发展到一个更高的层次. 在本文中,作者收集了一些惊人的使用CSS3技术的例子,如果多数浏览器能兼容CSS3,那么这些技术很可能会被广泛接受.

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.

Web 前沿技术:展示一组极其绚丽的 CSS3 效果

- - 博客园_梦想天空
  这篇文章收集了一组非常绚丽的. CSS3 效果应用演示,这些示例演示了 CSS3 各种新特性的强大能力. CSS3 支持的不断完善,设计师和开发者们有了更多的选择,以前需要使用 . JavaScript 才能实现的各种很酷的界面效果和动画,如今使用纯 CSS 代码就可以很容易实现. 相信下面这些 CSS3 演示会让你感到吃惊.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

网络视频技术问答(13):什么是自适应流媒体技术?

- - 钛媒体TMTpost—把脉科技资本论
自适应流媒体技术,就是能够智能感知你的下载速度,然后动态调节视频的编码速率,为你提供最高质量、最平滑的视频演播的技术. 答:所谓自适应流媒体技术,就是能够智能感知您的网络质量,然后动态调节视频的编码速率,为你提供最高质量、最平滑的视频演播的技术. 在我们看视频的时候,我们的网络下载速度就像高速公路上的汽车流量一样,不是一成不变的.