分享一个最近在使用的响应式css框架 Pure

浏览数：26 / 时间：2015年06月09日

响应式，就是根据浏览器或不同设备屏幕大小自适应内容。

第一次查响应式呢，了解到是要在head里写判断浏览器宽度之类的东西，也要设置对IE低版本兼容。

如：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="css/special1000.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:1900px)" href="css/special1900.css" />

mete标签意思是不网页不缩放。然后css外链样式是指最低宽度少于多少就调用什么什么css，这就出现一个问题就是要写很多兼容性的css。但也有好处，就是某些不方便自适应的内容通过css进行手动调整。

Pure是我经过测试发现兼容IE低版本的一个框架，其它响应式国外布局有的会在IE8出现叠加等错乱问题。

pure网址：http://purecss.io/

第一次接触pure呢，比较没头绪。不过经过多次折腾，总算总结出了一套简单使用方法。

第一步：

设置meta

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

第二步：

引用基础css，就是说，所有引用pure的代码之前，需要引入的一个css

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">

第三步：

引用pure的主css

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

第四步：

引入你需要的pure的css，这里呢，我们抛砖引玉，只管响应式布局：

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->

好了。该引用的都引用了。到底该怎么写呢？

看看官方说的吧：

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

我们新创建一个网页，加入引用以后，在body里加上这些div。

所有的pure标签应该width都是100%的，通过几分之几来控制布局。（关于具体能做几分只几，请点击http://purecss.io/grids/）

pure的网格系统支持5格和24格，主要有两种样式：pure-g和pure-u-*

1、pure-g，网格样式，例如<div class="pure-g"></div>这样就实现了一个网格

2、pure-u-*，单元格样式，网格里的内容必须放在网格单元里。例如pure-u-1-2表示单元格占1/2的宽度、pure-u-2-3表示单元格占2/3的宽度

pure-g是说这是一个表格，就相当于table，那表格内的单元格呢？那就是pure-u这里的-1-3指的是分3列，每列占3分之1.

注意：pure标签所在的div容器不要写其它控制性代码。

好了，我们发现这自动扩展的3列希望有点间距，那么只要在标签内新添加div控制就可以了

<div class="pure-g">
    <div class="pure-u-1-3">
        <div style="width:90%;margin-left:90px;">
        内容
        </div>
    </div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>