响应式布局-图片列表如何在窄屏（<320px）中显示为列，在宽屏（>768px）中显示为有间隙的一行

       摘要：本文旨在介绍在宽屏（>768px）中图片列表中如何显示为有固定间隙的一行排列，介绍了笔者自己尝试过得五种写法，并分析了其缺点，采用什么方法就得见人见智，具体情况具体分析了。

        如何在窄屏（<320px）中显示为一列呢，做出的显示效果如下图，其铺设方式是占满整行。

                                                                                                                                              

          笔者习惯先写小屏样式，再逐渐升级到大屏样式，以提升样式代码的复用性。该示意图结构代码可参考下方：

              <ul id="media"><li><img src="img/img1.jpg"></li><li><img src="img/img2.jpg"></li><li><img src="img/img3.jpg"></li></ul>

       其样式代码可参考下方（因为是先写的小屏样式（屏宽<320px），则可不写媒体查询语句，直接写样式）：

#media li {margin-bottom: 10px;}#media li img {width: 100%;}

     将img的width设置为100%，既设置了img的铺设方式（铺满整行），撑开了它的父级即li的宽度，同时也是设定img的高度是随着img的宽度进行等比缩放，即高度会随着屏幕宽度变化而变化；

   接下来就开始探讨如何在宽屏（>320px）中进行显示，显示效果如下图（以768px频宽为例），要求图片与图片间隔在之后的屏幕宽度中固定显示为3px;

                         

      方法一：

                        

@media all and (min-width:768px) {#media {margin-right: -3px;}#media li {        float: left;        width: 33.07%;margin-right: 3px;}}

      实际上此类方法是行不通的，因为width是由浏览器计算，存在误差，会出现第三张图片被挤到下一行的现象，如果想通过调整media的margin-right使图片排列在一行，会发现margin-right负值已经到一个不可理喻的值；

    方法二

    

@media all and (min-width:768px) {#media {margin-right: -0.4%;}#media li {                    float: left;    width: 33%;    margin-right: 0.3%;}

    此方法实现的仅仅是>768px且<992px屏幕的图片排列效果，因为中间的间隙是固定的，想要在>992px屏幕中也呈现与设计图一样的效果，则需要重新计算li的宽度和其margin-left值。因为浏览器存在误差，所以在计算时，需要将li和其margin-right百分值取整，使其总和小于数学意义上的100%，ul的margin-right需要根据li计算后的总和，再进行计算；

    方法三

#media li {                       box-sizing:border-box;       width:33.3%;                       padding-right:3px;                        }#media li:nth-of-type(3){                     padding-right:0;             }}

   此方法使用了怪异盒模型（box-sizing)，笔者在此使用了css3选择器来设置第三个li的padding-right值。如果考虑到兼容（部分浏览器不兼容css3选择器语法），可单独给该li设置一个类，再给这个类加相应样式。此方法有一个缺点：因为第三个li使用了怪异盒模型且无padding值，其图片实际显示效果会比另外两张图大且高一些，虽然误差不大，但是肉眼可见；

      方法四

     改变结构，即在结构中li（除第三个li)中增加一个空的span，使span的宽度为3px，高度为100%。设置li的宽度为33.3%，再使用定位将span定在两张图片之间。因为要改变结构，并不推荐此方法。且此类方法会改变图片的内容显示（因为有一部分被遮挡），故只阐述其做法，不展示代码；

      方法五

@media all and (min-width:768px) {  #media {display: flex;justify-content:space-between;}#media li {width:33.07%;}}

    此方法使用了flex布局，在计算好li的宽度后，剩余的空间会平均分配在两个元素（li）中间。但此方法与方法二缺点一致，无法将li之间的间隙随着屏幕逐渐变大而固定为3px，需要多次调整li的width。