南强小屋

彻底弄明白CSS3的Media Queries(跨平台设计)
站长资源 2024/12/26 佚名
10 1538
南强小屋 Design By 杰米

移动时代，是任何 Web 设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了 CSS3。

CSS3 的 Media Queries

在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：

  • 浏览器窗口的宽和高
  • 设备的宽和高
  • 设备的手持方向，横向还是竖向
  • 分辨率

如果用户有一个支持 Media Queries 的设备，我们就可以为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：

彻底弄明白CSS3的Media Queries(跨平台设计)

彻底弄明白CSS3的Media Queries(跨平台设计)

这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。

使用 Media Queries 为手机创建单独的 CSS

我们举一个简单的两栏式结构的例子。

彻底弄明白CSS3的Media Queries(跨平台设计)

为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小 header 部分的图片大小。

使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：

@media only screen and (max-device-width: 480px) {

}
code hosted by snipt.net 

@media only screen and (max-device-width: 480px) {

}
code hosted by snipt.net

 

@media only screen and (max-device-width: 480px) {

}

 

接着，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以覆盖桌面版 CSS 中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

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

	#navigation {
		float:none;
		width: auto;
	}
}
code hosted by snipt.net 

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

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

	#navigation {
		float:none;
		width: auto;
	}
}
code hosted by snipt.net

 

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

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

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

 

最终，我们在小屏幕设备上得到了如下显示效果：

彻底弄明白CSS3的Media Queries(跨平台设计)

使用 Media Queries 链接单独的 CSS 文件

对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
code hosted by snipt.net 
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />