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>

效果是一样的：