轻量级前端框架pure介绍 使用pure实现网站自适应

Pure是由美国雅虎出品的一款纯Css的前端框架，压缩成Zip压缩文件后最小只有3.7K，相比其他的前端框架比如Bootstrap来说要小了很多，但是功能确实也少了很多，但是基本上自己再写一些Js基本上也能实现前端页面所具备的一些基本的功能了。

pure中文官网

purecss.cn

Pure简单介绍

雅虎作为曾经的互联网巨头大佬，所出品的东西自然是不错的，通过Pure框架的中文官网，可以看出Pure其实使用起来还是十分简单方便、又十分小巧，整个框架最核心的部分就是栅格部分，实际的用法和Bootstrap的栅格布局基本上是类似的。其次就是表单、按钮、表格、菜单导航栏之类的很常用的一些组件，相比Bootstrap来说确实还是少了不少的功能，但是要实现网站简单的自适应使用Pure也确实够用了。

使用pure实现网站自适应

1、引入css文件

A、CDN引入pure前端框架

当然最重要的是你在引入pure前端框架前需要加上自适应的meta标签代码，这个是要实现网站自适应必须写入的标签代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

使用官网提供的pure的CDN地址，直接在和标签之间加入以下代码：

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

B、下载Pure源码引入

直接在pure官网中下载pure框架的ZIP压缩包，引入Css文件即可。

总来的来说还是提倡使用第二种下载源码引入的方式，使用远端CDN地址，会存在延迟问题，偶尔CDN还会抽风会导致前端页面错乱，所以还是提倡使用第二种方法。

2、使用Pure栅格系统实现网站自适应布局

Pure栅格系统使用起来很方便，首先需要用pure-g创建行，再用pure-u-*创建列，下面是官网给出的一个实例。

<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>

最后显示出来的就是三列的布局。

3、使用Pure栅格系统需要注意的问题：

（1）、控制每列的边距，必须在pure-u-*内在写入Css的类来实现。以以上代码为例，如果要实现三列之间的间距，就需要在pure-u-1-3那个div内部重新再命名一个calss，给这个class设置内边距或者是外边距，这样才会使三列之间有间距，如果直接加载pure-u-1-3后面是无法生效的。

（2）、使用Pure栅格系统，必须先pure-g创建行。

以上就是在前端页面制作的过程中所遇到的一些问题，最重要的就是第一条。

4、Pure栅格系统自适应表格

可以参考以上的pure栅格系统自适应的Css媒体查询使用不同的类class在不同的设备下实现网站的自适应。

本博客就是简单的使用了Pure的css前端框架制作了一个简陋的主题。以上就是今天简单的介绍了Pure前端框架，以及简单的使用pure栅格系统实现网站的自适应，总的来说这个前端框架确实比较小巧，但要实现一些动态效果还是需要自己写写一些Js。