【技術分享會】 @第三期 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