首页 > 代码库 > 【CSS框架】PRUE实现自适应和响应式

【CSS框架】PRUE实现自适应和响应式

 

什么是响应式和自适应?

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、只提供布局,没有多余的样式阻碍

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

 

【CSS框架】PRUE实现自适应和响应式