CSS3 Tee Gallery网站的分析

今天的案例Tee Gallery是涉及产品列表布局的应用。换句话说就是让产品列表页面如何应用流体布局结合CSS3的Media Queries，制作出在不同媒体条件和媒体介质下的页面风格。

先看看这个网站在不同屏幕下的风格，如图：

从上面的截图中，很明显他在不同的屏幕下会不同的显示效果，屏幕最大时，以五列显示产品，随着屏幕的变化，慢慢的从五列变成四列，三列，直到最后面的两列，这个网站的布局很像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）写上不同布局样式，或者说美化样式，可以让你的网站在不同的媒体条件或媒体介质下实现不同的渲染效果。

文章实战参阅可以查：http://localhost/response/teegallery.html