今天学习了pure.css可定制的网格系统，pure默认的网格系统是移动先行，如果我们想在小屏幕上有网格只要用pure-u-*就可以了，下面来说一下它的主要用法！
<div class="pure-g">
<div class="pure-u-2-5">五分之二</div>
<div class="pure-u-1-5">五分之一</div>
<div class="pure-u-1-5">五分之一</div>
<div class="pure-u-1-5">五分之一</div>
</div>
效果：
那么图片如何随着设备的缩小与放大，宽高保持正确的比例呢？
<div class="pure-g pics">
<div class="pure-u-1-3">
<img src="imgs/testImg01.jpg" alt="" class="pure-img">
</div>
</div>
<div class="pure-u-1-3">
<img src="imgs/testImg02.jpg" alt="" class="pure-img">
</div>
</div>
<div class="pure-u-1-3">
<img src="imgs/testImg03.jpg" alt="" class="pure-img">
</div>
</div>
</div>
这样就可以让这三张图片在一行显示，并且可以随着设备的大小而保持宽高等比例了！
效果如下图所示：
而在实际过程当中我们不可能让这些图片一个挨一个的排列，得让他们之间有一定的距离，而且一般在实际的移动页面之中他们的下方还有一定的说明文字。因此我们这边就可以使用l-box （即应用填充和边框网格）
方案一：（推荐）
style中的代码：
<style>
/*图片*/
.pics{
text-align: center;
}
.wenzi{
display: inline-block; /* span是行内元素*/
margin-top: 2px;
}
/*应用填充边框网格单位*/
.l-box{
padding: 1em;
}
</style>
body中HTML代码：
<div class="pure-g pics">
<div class="pure-u-1-3">
<div class="l-box">
<img src="imgs/testImg01.jpg" alt="" class="pure-img">
<span class="wenzi">森林深处</span>
</div>
</div>
<div class="pure-u-1-3">
<div class="l-box">
<img src="imgs/testImg02.jpg" alt="" class="pure-img">
<span class="wenzi">冰天雪地</span>
</div>
</div>
<div class="pure-u-1-3">
<div class="l-box">
<img src="imgs/testImg03.jpg" alt="" class="pure-img">
<span class="wenzi">夕阳西下</span>
</div>
</div>
</div>
方案二：（缺点：传统的浏览器如IE 7及以下缺乏支持的box-sizing）
style样式：
<style>
html{
font-size: 60%;
}
/*核心样式*/
.pure-g > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.l-box {
padding: 1em;
}
/*其它样式*/
.pics{
text-align: center;
font-size: 1rem;
}
.wenzi{
display: inline-block;
margin-top: 5px;
}
</style>
body中的html:
<!--方式二：-->
<div class="pure-g pics">
<div class="pure-u-1-3 l-box">
<img src="imgs/testImg01.jpg" alt="" class="pure-img">
<span class="wenzi">森林深处</span>
</div>
<div class="pure-u-1-3 l-box">
<img src="imgs/testImg02.jpg" alt="" class="pure-img">
<span class="wenzi">冰天雪地</span>
</div>
<div class="pure-u-1-3 l-box">
<img src="imgs/testImg03.jpg" alt="" class="pure-img">
<span class="wenzi">夕阳西下</span>
</div>
</div>
效果是一样的：
这就是pure.css的图片响应式的写法了！