有关于CSS3 Media Queries的介绍，现在在网络上铺天盖地了，在《CSS3 Media Queries》中主要介绍了一些关于CSS3 Media Queries的理论知识，而在《CSS3 Media Queries案例——Hicksdesign》中介绍关于CSS3 Media Queries应用的第一个案例，今天和大家一起来看有关于CSS3 Media Queries实战中的第二个实例A List Apart网站。看看这个网站是如何应用CSS3 Media Queries的。

首先一起来看一下A List Apart在不同分辨率或不同媒体设备下的渲染效果，如图所示：

从上面的效果图中，大家可以明显看出A List Apart网站随着浏览器改变尺寸大小时，会有上面三种效果渲染出来：

1. 大尺寸（Large Size）：主要渲染成，主导航菜单在内容顶部，并且主内容的图片以一行显示；
2. 中等尺寸(Medium Size)：当浏览器屏幕变小时，主导航菜单从刚才的顶部，定位到到左边栏中，而且主内容中的图片也不在显示成一行，而是以三行的方式在页面上渲染；
3. 小尺寸(Small Size)：当你的浏览器屏幕再次缩小时，主导航菜单又回到顶部，此时的logo背景图片不在显示，同时也移到了导航菜单的下面，主内容的图片还是以三行的效果显示出来。

想体验这样的变化，大家可以到A List Apart网站上感受一下上面所讲的变化效果，下面主要是一起来看其如何实现。如果你看了《CSS3 Media Queries》和《CSS3 Media Queries案例——Hicksdesign》的话，你对A List Apart如何实现就有一定的了解。A List Apart和前面所说的Hicksdesign是一样的，采用了流体布局，并结合CSS3的Media Queries技术，使其在不同的媒体类型和媒体特性下渲染出不同的显示效果。今天要说的这个实列，比前面的《CSS3 Media Queries案例——Hicksdesign》应用的更简单。这个实例主要要掌握三个地方：

1. 导航的布局变化
2. 主内容图片的布局变化
3. Logo的布局变化

我们依次来看这几个地方，首先把注意力集中到主内容的图片中来，默认的布局是这样的：

				<ol>
					<li class="figure" id="f-holmes">图片相关内容放在这里</li>
					<li class="figure" id="f-watson">图片相关内容放在这里</li>
					<li class="figure" id="f-mycroft">图片相关内容放在这里</li>
					<li class="figure" id="f-moriarty">图片相关内容放在这里</li>
					<li class="figure" id="f-adler">图片相关内容放在这里</li>
					<li class="figure" id="f-winter">图片相关内容放在这里</li>
				</ol>
			

他的默人样式是：

			 	.figure {
				  float: left;
				  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
				  width: 31.121642969984202211%;             /* 197px / 633px */
				}

				li#f-mycroft,
				li#f-winter {
				  margin-right: 0;
				}
			 

其中一些美化样式没有贴出来，这里只是想和大家一起学习他的布局方法，所以把重点放在了布局上。从上面的代码中大家不难发现，设计师把每一列的宽度定为总宽度的三分之一，并把第三个和第六个的右边距重置为0（#f-mycroft,#f-winter）。如下图显示的效果

如果只这样就完事的话，大家都知道，当我们把窗口变小或变大时，整个设计就乱了，那为了解决适应各种屏幕显示正常，就需要在样式中引进CSS3的Media Queries，具体的大家可以参考下在的代码：

				/*屏幕小于等于600px下的样式*/
				@media (max-width: 600px) {
					/*在这个媒体条件下，主内容的图片还是采用上面的默认布局样式*/					
				}
				
				/*屏幕小于或等于400px下的样式*/
				@media (max-width: 400px) {
					.figure,
					li#f-mycroft {
						margin-right: 3.317535545023696682%;	/* 21px / 633px */
						width: 48.341232227488151658%;	/* 306px / 633px */
					}
					li#f-watson,
					li#f-moriarty {
						margin-right: 0;
					}
				}
				/*屏幕大于或等于1300px下的样式*/
				@media (min-width: 1300px) {
					.figure,
					li#f-mycroft {
						margin-right: 3.317535545023696682%;			/* 21px / 633px */
						width: 13.902053712480252764%;				/* 88px / 633px */
					}	
				}
			

上面显示了三处媒体条件下对.figure样式的设置（主内容中的图片列表），但还有一点，图片样式要设置好，不然就是改变了列表样式，图片没有跟着做相应修改，也会造成意想不到的意外。解决这样的问题可以给图片写上一个共用的样式

				img {
					max-width: 100%
				}
			

我个人不太赞同上面的写法，我认为这样写会更合理一点，

				.figure img {
					width: 100%;
					height: auto;
				}
			

这样一来，主内容中的图片就达到我们一开始显示的那几种渲染效果。接下来我们在来看其他两个部分“主导航”和logo。他们同时放在div.mast,此处我们主要来看其样式，同样我们先来看全局的样式：

				/*logo和导航的容器元素标签*/
				.mast {
					float: left;
					width: 31.875%;	/* 306px / 960px */
				}
				/*logo部分*/
				h1 {
					background: url("site/logo-bg.png") no-repeat 50% 0;
				}
				h1 a {
					padding-top: 117px;
					height: 162px;
					display: block;
					text-align: center;
				}				
				/*导航*/
				ul.nav {
					border-top: 1px solid #888583;
					margin: 2em auto 0;
					width: 64.379%;
				}				
			

这里贴出的也只是布局上的代码,请看全局下的效果图：

同样使用CSS3的Media Ｑueries让页面在不同媒体条件下渲染不同效果

				
				@media (max-width: 600px) {
					/* 633px grid (88x6 col, 21x5 gut; 88+21+88+21+88+21+88+21+88+21+88) */
					.inner {
						position: relative;
					}
					.mast,
					.intro,
					.main,
					.footer {
						float: none;
						width: auto;
					}
					h1 {
						background: none;
					}
					h1 a {
						padding-top: 70px;
						height: 87px;
					}
					ul.nav {
						background: url("site/ornament.png") no-repeat 0 -20px;
						border-top: none;
						margin: 0 auto;
						position: absolute;
						top: 0;
						width: 100%;
					}
					ul.nav li {
						float: left;
						margin-right: 3.317535545023696682%;	/* 21px / 633px */
						width: 31.121642969984202211%;		/* 197px / 633px */
					}

					ul.nav li.last {
						margin-right: 0;
					}
				}
				@media (max-width: 400px) {

				}
				@media (min-width: 1300px) {
					.mast {
						float: none;
						width: auto;
					}
					h1 {
						float: left;
						width: 31.875%;	/* 306px / 960px */
					}
					ul.nav {
						float: right;
						margin: 40px 0 1em;
						text-align: center;
						width: 65.9375%;	/* 633px / 960px */
					}
					ul.nav li {
						float: left;
						margin-right: 3.317535545023696682%;			/* 21px / 633px */
						width: 31.121642969984202211%;				/* 197px / 633px */
					}
					ul.nav li.last {
						margin-right: 0;
					}				
				}
			

到这里就完成了对media queries的引用工作。从而制作出页面开头图片显示的效果。这个网站相对来说比较简单，但做为一个资深的设计师，其功能往往不在于这一点点，可以借助Media Queries在web页面上实现一些更精致，更完美的东西。也可以进一步提高用户的体验。

最后总结一点：A List Apart网站合成了web网页制作中的流体的网格布局，灵活的图片排列，Media Queries的判断。但我们的设计往往不只局限在此，我可以通过这样的设计思维，制作出不在局限于桌面浏览器,而是可以直接在移动设备或者更多的设备上浏览。这种设计思维并不是默认不变的，但我个为认为这种设计将会是web布局设计的一种趋势。或许将是一种流行。。感兴趣的朋友可以体会一下这种新技术，我想你会像我一样喜欢上的。如果你对A List Apart感兴趣，你还可以点这里看到他的最新版本布局风格。或者你可以点Ethan Marcotte写的《Responsive Web Design》,这里更详细的阐述了A List Apart。

如需转载烦请注明出处：W3CPLUS