歡迎來到大唐傳易博客!

網站建設

當前位置:首頁 > 網站建設 >

自適應框架bootstrap和foundation選用哪個?

時間:2019-10-27|欄目:網站建設|網站標簽:|點擊:

      隨著自適應技術的來臨,大家不用做兩個不同的站點(通常是pc端和wap端)。利用自適應框架可以為前端開發人員省下非常多的事。對于前端開發語言非常的豐富,技術人員不知道如何選擇,我想分享下我自己使用的不同的自適應技術框架的使用。


 

     前端自適應框架有哪些?

   
bootstrap、kube、pure、foundation、kit等。通常來說前端響應式框架使用比例比較高的有兩款,一款是bootstrap、另一款則是foundation。那么今天就給大家介紹下這兩者的差異化。

     bootstrap和foundation關鍵區別:

      
1. UI 元素

       Foundation 只安排了有限的幾種元素, Bootstrap 則給你了所有你可以想像到的一切元素.ZURB 對于 Foundation 的設計目標是, 縱然你使用預定義的 UI 元素, 也不應該與大家的網站長的太像.而另一邊, Bootstrap 則試圖給你提供所有定義好的 UI 元素.
 

       2. REMs VS Pixels

      Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.
 

      使用 Pixels 意味著你不得不準確定義一個組件的高, 寬, 內邊距, 外邊距, 而且在每一種設備與屏幕尺寸上, 因為不同的設備往往顯示效果區別很大.
 

      現在 Foundation 5 使用 REMs, 而不是 EM. 這樣, 避免了 EM cascade 問題: http://css-tricks.com/font-sizing-with-rem/
 

      使用 REMs 意味著你可以直接用 font-size: 80%;就可以讓整個組件和它的子組件縮小 20%.
 

      值得說明的是, 通過 REMs, 你可以脫離 Pixels 的細節了, 所以, 使用 REMs 來處理是非常值得的.
 

      Foundation 還提供了 sass 的 mixin 方法來將 Pixels 轉換為 REMs, 這樣, 你還可以繼續使用 Pixels 的思考方式來定義頁面:.element { width: rem-calc(10px); // will be converted to REMs} 3. 靈活的網格 VS 預定義的網格。Foundation 的網格可以自動適配當前瀏覽器的寬度. Boostrap 則是預定義了幾種網格尺寸來適配主流的設備和屏幕.Bootstrap 會在你改變瀏覽器寬度的時候突然改變它的網格.
 

      Foundation 則會靈活適配當前的瀏覽器寬度, 這是一種新的技術手段, 自動適配的同時, 可以表現的與 Transformer 一樣的效果.
 

      Foundation 當網格改變時有兩個要點: 小, 中和大. 所有的操作都只有縮小和放大, 并適應于當前瀏覽器的寬度. 不需要預定義的屏幕大小, 并且更主要的原因是, 鼓勵你去根據屏幕的大小來定義不同的樣式.
 

      使用 Bootstrap, 你得到一個固定的或者說流形的網格, 這意味著你需要分別設定或者說對于網格容器不是一個預定義好的寬度.使用 Foundation 和 Sass, 你可以自由調整最大的網格的大小( 中型的和小型的自動被計算 ), 大屏幕的列數, 小屏幕的列數.
 

    4. 移動設備優先 VS 也支持移動設備

       Foundation 設計時已經考慮了任何四角屏幕. 而 Bootstrap 設計時則預先分為: 手機, 平板, 臺式機和超大屏幕的臺式機.構建一個優先支持移動設備的網站意味著它肯定在更大的屏幕上是可用的. 所以, Foundation 鼓勵你這樣去做: 移動優先.如果你使用 Foundation 的 Sass Media Query Mixin, 你就會發現, 沒有特定的 Media Query 來查詢什么是移動設備, 而是你使用 Media Query 來定義在更大的屏幕下應該怎么顯示.設計東西時先考慮臺式機的話很可能在支持更小屏幕時遇到很大問題, 和先考慮手機的話, 將會讓你專注于什么是對用戶最重要的, 讓你空間提用感上升.

 

     5. 社區

     Bootstrap 有一個更大的社區. 而使用 Foundation 你就不得不自力更生一些.Bootstrap 非常大的亮點就是社區. 這是一個非常巨大, 包羅萬象, 幾乎找啥都可以找到.

如果你選擇了 Foundation, 自力更生可能就是你不得不掌握的了. 幾乎所有的解決方法都是為 Bootstrap 的, 你只能自己再去構建自己的.
 


 


     bootstrapvsfoundation的體驗區別

    
1.從使用頻率來說,Bootstrap(框架)被國內外各種偷懶的程序猿們拿來做項目的主頁/文檔,第一眼看上去,和官網的demo對比除了文字換了,其他完全就是一回事!當然不僅僅是剛才提到的,其他很多的由靜態頁面構成的網站也廣泛應用了Bootstrap(框架),之所以要給框架加上括號,是我認為Bootstrap已經不僅僅被作為框架應用,壓根就是快速建站的模板啊!所以像上面幾位提到的,Bootstrap很容易上手,從而也帶來了泛濫問題。另一方面,Foundation國內則相對較為小眾。
 

      2.從兼容性問題來說,Foundation 4已經放棄了IE 8的支持,而Bootstrap 2仍能較完美支持IE 8(Bootstrap 3已經逐步開始放棄IE 8),甚至通過類似bs-ie的方式來達到大部分component支持IE 6的要求,這點在國內可能還是選擇時需要考慮的一個重要因素吧。

      3.從JS庫來說,Bootstrap 2/3采用的都是更為常見的jQuery,Zepto我沒有用過,所以無法評判其好壞。

      4.社區支持度來說,Bootstrap在Github上的人氣毋庸置疑,國內也有中文版的文檔,各種教程案例以及衍生而來的插件、主題也是層出不窮,一片欣欣向榮之相,而Foundation的社區支持度則相對來說較為薄弱。

       5.Foundation 4的開發理念是mobile first,而Bootstrap才剛剛將這點上升到首要(Bootstrap 3 RC1版本),根據你的開發需要,你可以適當考慮這點。

       所以選用foundation還是Bootstrap要看個人的習慣,個人認為bootstrap適合新手,而foundation比較強大,適合經驗豐富的前端開發人員。

上一篇:福州旅游網站建設解決方案

欄????目:網站建設

下一篇:企業網站制作方案,就應該這么規劃!

本文標題:自適應框架bootstrap和foundation選用哪個?

本文地址:http://www.cajqou.live/news/702.html

說點什么吧
  • 全部評論(0
    還沒有評論,快來搶沙發吧!

| |

如果侵犯了您的權利,請與我們聯系,我們將在24小時內進行處理、任何非本站因素導致的法律后果,本站均不負任何責任。

Copyright © 2016-2019 福州大唐傳易網絡科技有限公司 版權所有

北京pk10单双公式计算 视频网答题赚钱 手机赚钱微信拆红包 在家手工生产的赚钱项目 开会计课赚钱吗 招标公司里面靠什么赚钱 学什么有赚钱的方法 150武器幻化赚钱吗 如何在qq飞车上赚钱 做康宝来的人赚钱很轻松吗 现在什么行业才能赚钱最快 鹤岗批发什么赚钱 黑鲨系统重装靠什么赚钱 梦幻西游分解60铁赚钱 在商场什么赚钱 猫盘挖矿机可以赚钱 除了做微商还有什么可以在家赚钱