W3.CSS 使用心得

要做 Responsive Web Sites，最簡單的方法，當然是找一個 CSS framework 來使用，根據統計，最多人使用的當然是 Bootstrap。

我之前也用了 Bootstrap，其中最讓我不滿意的，就是許多狀況下，它必須搭配 jQuery，但是天底下總是會有不用 jQuery 的人，剛好在下就是其中一名，且到了 Bootstrap 4 之後，看來 jQuery 是非用不可，所以藉著工作的空檔，試試看其他的 CSS framework 了。

目標就是將我的 Blogger 改成 responsiveness，而選用的 CSS framework，也沒有挑很久，就拿 W3.CSS 來試試了。

W3.CSS 

W3.CSS 是 w3schools.com 開發的，授權方面，網站上是說完全免費，所以不需要授權 (W3.CSS is free to use. No license is necessary)。

Size

Bootstrap v3.3.7 是 118 KB (壓縮傳輸 23 KB)，W3.CSS 32 KB (壓縮傳輸 6 KB)，雖然多數狀況下都是直接從 local cache 就載入。

Javascript

Bootstrap 指定搭配 jQuery。

W3.CSS 用到 Javascript 時，直接使用 Javascript 當範例，以這一方面說，或許是較熟悉 Javascript 的，比較適合使用。

例如用 Mootools：

別忘了按按看上面那個按鈕，或者看 jsfiddle 比較清楚。

Responsiveness

W3.CSS 跟 Bootstrap 一樣可以用 grid 的方式達成 responsiveness，一列一樣是 12 個 grid，也一樣有 small、medium、large 三種螢幕尺寸的 grid 可以用。

不過 W3.CSS 還可以用一半、三分之一、四分之一、剩餘空間

當然啦！用 grid 也是可以自己算，

結論

除非是非用 Bootstrap 不可，我會推薦可以用 W3.CSS。