使用CSS、JS強化RWD設計

前言：
     之前有介紹過一篇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

下載範例點我

---