那些年我们遇到的网站响应式的烦恼之响应式实战

很多时候公司启动一个新站的时候会考虑到用户视觉体验，各个浏览器尺寸不同，如何让用户在不同的分辨率下都能有良好的体验。这就有了响应式的产生，作为一个初入职场的前端萌新，势必会遇到一些问题...

举个最常见的响应式的例子吧。。产品列表

看到这个设计图，最先想到的方式是什么...
1. float: left
2. display: flex;
3. display: inline-block;
还要注意响应式，最开始我用的方式是每个块浮动并给右边距，然后每一排最后一个 右边距为0

<ul class="grid_wrap">
  <li>
     中间块的内容布局
  </li>
  ...
</ul>

.grid_wrap li {  
  width: 25%;
  margin: 0 auto 2em;
  float: left;
  padding-right: 20px;
}
.grid_wrap li:nth-child(4n) {  
  padding-right: 0;
}

好，到这里，惨淡的地方看粗来了吗。。。
1. 浮动之后每个块不是等高的，当最后一个块高度小的情况下，布局直接乱掉
2. 当浏览器各个尺寸下一排不一定会放4个列表，在不同的设备下都得控制显示列表的个数...

flex就不用问了，兼容性不太好，在这里后来我选择了display: inline-block;  上代码

.grid_wrap {
  font-size: 0; // 去除inline-block的间隙影响
  margin-right: -20px; // 这里的用意是 让整体块负出去，不需要给每一排的块最后一个右边距都为0
}
.grid_wrap li {
  font-size: 16px; // 在子元素块上加上相应的字号
  width: 25%;
  margin: 0 auto 2em;
  display: inline-block;
  vertical-align: top; // 让所有的元素顶部对齐
  padding-right: 20px;
}

这样子布局的话，看到好处了吗？
一来：不用去清除最后一个元素的右边距，二来： 不需要等高，布局也不会乱掉偶

• 看到这里，还有一个很讨巧的地方，如何让整个块不写高度的情况下，让图片自由伸缩以便适应响应式，有的同学会想到，用默认图片去撑，但是在网络很不好的情况下，默认图片出不来，页面就会很不美观了，在这里我发现了:after的妙用

利用 :after 写一个块，padding-top:100% 去撑整个块，这样子当图片加载不出来的时候，依然有一个块去撑使页面很美观，嘻嘻，beautiful，下边附上代码

HTML 部分

<a class="pic_view">
   <img src="xxx.jpg"/>
</a>

CSS部分

.pic_view:after {
  content: "";
  width: 0;
  display: inline-block;
  padding-top: 100%;
  vertical-align: middle;
}
.pic_view img {
  vertical-align: middle;
  display: inline-block;
  width: calc(100% - 2px); // 这里我只是希望图片内容不顶边
}

这样子就可以改很少部分的代码，只需要改每个设配一排放几个块就好啦，完美