CSS3 Media Queries案例——Tee Gallery
今天继续讲有关于CSS3 Media Queries案例，前面介绍的《CSS3 Media Queries案例——Hicksdesign和《CSS3 Media Queries案例——A List Apart》都是有关于页面的应用，而今天的我要说的案例Tee Gallery是涉及产品列表布局的应用。换句话说就是让产品列表页面如何应用流体布局结合CSS3的Media Queries，制作出在不同媒体条件和媒体介质下的页面风格。别的先不说，和大家一起目睹一下Tee Gallery网站在不同屏幕下的显示风格，如下图所示：
从上面的截图中，很明显他在不同的屏幕下会不同的显示效果，屏幕最大时，以五列显示产品，随着屏幕的变化，慢慢的从五列变成四列，三列，直到最后面的两列，这个网站的布局很像Colly网站，但不同的是Colly使用的是固定布局，而Tee Gallery网站采用的是流体布局，采用的是百分比，感兴趣的同学可以去打开这两个网站查看源码仔细对比一下，这里我主要是以Tee Gallery网站为例，来再次说明CSS3的Media Queries结合流体布局对产品列表的应用。
下面我们一起来看看产品部分的代码结构，先看他的Html:
<section id="gallery"> <article>产品一</article> <article>产品二</article> <article>产品三</article> <article>产品四</article> <article>产品五</article> </section>
为了节省空间略去部分代码，更详细的大家可以参考Tee Gallery网站。此处其产品都放在了article标签中，也就是一个产品对应的是一个article，如果你有很多产品，只需要在后面加上这个标签，类似于列表中的li。接下来看共全局样式：
#gallery {
margin: 0 auto;
padding: 18px 0;
width: 95%; /*960px/1024px*/
}
#gallery article {
position: relative;
float: left;
margin: 10px 1%;
width: 23%; /*把总宽度分成四列*/
_width: 22.5%;
}
#gallery article a.inner {
display: block;
padding: 13px;
}
#gallery article img {
display: block;
width: 100%;
}
上面截取的代码只是针对产品列表article中的布局代码，同样把其美化样式给省略了，其效果如下图所示：
最后关键的一步是，引进Media Queries实现产品列表五列，三列，两列的排列方式，这部分代码如下所示：
/*五列显示*/
@media screen and (min-width: 1150px) {
#gallery article {
width: 18.5%;
margin-left: 0.75%;
margin-right: 0.75%;
}
}
/*三列显示*/
@media screen and (max-width: 935px) {
#gallery article {
width: 31.3333%;
margin-left: 1%;
margin-right: 1%;
}
}
/*两列显示*/
@media screen and (max-width: 750px) {
#gallery article {
margin: 2%;
width: 46%;
}
#gallery article a.inner {
padding-top: 20px;
padding-bottom: 20px;
}
}
这样一来，页面头部所显示的四种效果就全部出来了，本文只是截取相关部分代码，大家感兴趣可以到Tee Gallery网站上查看其原代码。也可以自己亲身制作一个，这个并不难，我想通过这几个实例下来，大家对这个肯定有一定的了解，只是没有实战经验而以。
到今天为上，有关于CSS3的Media Queries相关案例就介绍完了，最后在重说一次我们把这种流体的布局，结合CSS3的Media Queries进行各种布局称作为Responsive CSS Grid System。换句话说，在各种媒体条件下（CSS3 Media Query）写上不同布局样式，或者说美化样式，可以让你的网站在不同的媒体条件或媒体介质下实现不同的渲染效果。
备注；如果你对Responsive CSS Grid System感兴趣，可以直接点击这里，进去了解更多的相关知识。或者说你对这种布局很感兴趣，你可以点击Media Queries，查看更多的相关Demo的应用。
如需转载烦请注明出处：W3CPLUS
jordan retro 11 mens crimson