【技术分享会】 @第三期 CSS框架 PRUE 实现自适应和响应式

 

Pure网址：https://purecss.cn/

 

什么是响应式和自适应？

1、响应式：样式会随着屏幕大小改变，同一页面设备不同样式不同
2、自适应：不管屏幕大小，页面的样式比例不变

响应式和自适应怎么布局？

在css3之前无从谈起响应式和自适应
Css3怎么做到的呢？(我知道的几种)
1、媒体查询
2、运用百分比布局
3、rem
4、css框架（Bootstrap、jQuery Mobile、Pure……）

 

1、媒体查询
      @media all and (屏幕宽度){
                                样式表
                              }
2、运用百分比布局
       width：100%；
3、rem
       body{font-size：62%；}
4、css框架（Bootstrap、jQuery Mobile、Pure……）
        具体谈论下pure

 

Pure：纯净的，干净的。
Pure是来自雅虎的。
尽管从UI界面效果上来说，Pure没有Bootstrap那样精美，
但Pure是纯CSS实现的，因此非常小巧，整个框架压缩后只有5.7k左右（保守的）。

Pure特点：

1、最大的特点就是框架基于纯CSS，无任何JavaScript代码，
   渲染速度比较快。
2、由Yahoo出品，技术上应该不存在太大问题。
3、框架十分小巧，压缩后仅5.7k。
4、组件也很丰富，包括表格、表单、按钮、导航等。
5、CSS类的标识十分简单，因此在使用Pure的过程中代码会比较友好。
6、只提供布局，没有多余的样式阻碍

PPT资料

http://pan.baidu.com/s/1qYMzIxe