之前有介紹過一篇RWD速成法，今天要講的是稍微進階一點點的，若只是用框架來套用勢必是不能滿足我們所有的RWD需求，所以很多時候我們還是要用CSS以及JavaScript來加強RWD的設計
使用CSS：
關鍵字：@media
@media all and (min-width: 1000px) {
div{font-size:150%;color:green;}
}
@media all and (min-width: 700px) and (max-width: 999px) {
div{font-size:120%;color:blue;}
}
@media all and (max-width: 699px) {
div{font-size:100%;color:red;}
}
接著來看看它變成甚麼樣子了(這個範例是延伸上次Grid System的範例)
寬度超過1000px時，字體大小是150%且顏色為綠色
寬度介於700~999px時，字體大小是120%且顏色為藍色
寬度小於699px時，字體大小是100%且顏色為紅色
補充：all表示當瀏覽裝置為任何裝置時(含電腦及手機)，但若要在手機上也能有效果，(max-width: 699px)的部分也要改成(max-device-width: 699px)才可以喔～
@media這部分w3school有更詳細的解說，不過好像沒有中文的(?!
使用JavaScript：
關鍵字：document.documentElement.clientWidth，取得視窗寬度(高度則改成Height)
function load(){
if ( document.documentElement.clientWidth < 800 ){
alert("目前視窗寬度為" + document.documentElement.clientWidth);
document.getElementById("body").setAttribute("onClick","alert('我被點了');");
}
}
當頁面讀取的時候，如果視窗寬度小於800，則會跳出一個視窗告知寬度，並將body增加一個點擊事件
補充：
範例中document.documentElement.clientWidth只是一種取視窗大小的方式，還有很多種不同的變化取用法，可以參考這個點部落的文章，寫得非常的詳細 https://dotblogs.com.tw/aquarius6913/2011/01/03/20538
結語：
結合Framework加上自己寫的CSS以及Javascript，絕對可以做出一個很完善的RWD設計，只要用心對待每一個pixel(?! ，他們一定會給你回饋的 XD
結合Framework加上自己寫的CSS以及Javascript，絕對可以做出一個很完善的RWD設計，只要用心對待每一個pixel(?! ，他們一定會給你回饋的 XD
