使用VW单位实现

      vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%），假如我们要实现每个

1. li { 
2.     float: left; 
3.     width: 31.3333%; 
4.     margin: 1%; 
5.     height: 23.5vw; 
6. } 

      这个方法适合在移动端，vw属于CSS3，可兼容 安卓4.4+，IOS7.0+，如需兼容旧版就不适用了。

使用padding属性实现

      padding 与 margin 值设置为百分比是以父元素宽度的百分比，即使对 padding-top 和 padding-bottom 也是如此，而padding是计算在宽高里的，即设置了 overflow: hidden; 并不会把 padding “溢出”，同样我们需实现每个

1. li { 
2.     float: left; 
3.     width: 31.3333%; 
4.     margin: 1%; 
5.     height: 0; 
6.     padding-bottom: 23.5%; 
7.     overflow: hidden; 
8. } 

这个方法无兼容性问题，可兼容旧版浏览器。

如果

1. li { 
2.     float: left; 
3.     width: 31.3333%; 
4.     margin: 1%; 
5. } 
6. li .pic { 
7.     height: 0; 
8.     padding-bottom: 75%; 
9.     overflow: hidden; 
10. } 
11. li .pic img { 
12.     width: 100%; 
13.     height: auto; 
14. }