Pure.css网格系统学习心得——图片的响应式以及应用填充和边框网格单位的学习

今天学习了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的图片响应式的写法了！