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中的代码：

 1 <style>
 2   /*图片*/
 3         .pics{
 4             text-align: center;
 5         }
 6         .wenzi{
 7             display: inline-block; /* span是行内元素*/
 8             margin-top: 2px;
 9         }
10         /*应用填充边框网格单位*/
11         .l-box{
12             padding: 1em;
13         }
14 </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样式：

 1  <style>
 2         html{
 3             font-size: 60%;
 4         }
 5         /*核心样式*/
 6         .pure-g > div {
 7             -webkit-box-sizing: border-box;
 8             -moz-box-sizing: border-box;
 9             box-sizing: border-box;
10         }
11         .l-box {
12             padding: 1em;
13         }
14         /*其它样式*/
15         .pics{
16             text-align: center;
17             font-size: 1rem;
18         }
19         .wenzi{
20             display: inline-block;
21             margin-top: 5px;
22         }
23     </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的图片响应式的写法了！

 

转载于:https://www.cnblogs.com/xinjianheyi/p/6225127.html