首页 > 代码库 > 分享一个最近在使用的响应式css框架 Pure
分享一个最近在使用的响应式css框架 Pure
响应式，就是根据浏览器或不同设备屏幕大小自适应内容。
第一次查响应式呢，了解到是要在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=http://www.mamicode.com/"css/special1000.css" /><link rel="stylesheet" type="text/css" media="screen and (min-width:1900px)" href=http://www.mamicode.com/"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://www.mamicode.com/"http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
第四步：
引入你需要的pure的css，这里呢，我们抛砖引玉，只管响应式布局：
<!--[if lte IE 8]> <link rel="stylesheet" href=http://www.mamicode.com/"http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css"><![endif]--><!--[if gt IE 8]><!--> <link rel="stylesheet" href=http://www.mamicode.com/"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>
有的人好说了，没效果啊，重点来了。
在class里加入 pure-u-1 pure-u-md-1-2 pure-u-lg-1-3
pure-u-1代表宽度最小时会有1个单元显示
pure-u-md-1-2代表宽度达到一定时显示2个
pure-u-lg-1-3代表宽度达到一定时显示3个
目前我是这么理解的，大家可以测试下。