使用coServ製作RWD

1. coServ & RWD
打造跨平台的橋樑

2.  在不同解析度下改變網頁頁面的佈局
 在各種裝置下以最佳的視覺體驗瀏覽網頁
響應式網頁設計(RWD)

3. WebSite Layout
Slider
Main
Header
Footer
Nav

4. Tablet Layout
Slider Main
Header

5. Tablet Layout
Slider Main
Header
Nav

6. Mobile Layout
Header
Main1
Tab Tab Tab
Header
Main2
Tab Tab Tab

7. Mobile Layout
Header
Main1
Tab Tab Tab
Header
Main1
Tab Tab Tab
Nav

8. @media only screen and (max-width: 768px) {
/*螢幕寬度768載入*/
}
@media only screen and (max-width: 600px) {
/*螢幕寬度600載入*/
}
@media only screen and (max-width: 480px) {
/*螢幕寬度480載入*/
}
傳統作法

9.  在www/sites.json中設定樣板
 在 JavaScript裡動態載入指定的CSS
coServ 作法

10. 新增專案 > node cli/addSite testRWD
更改sites.json檔案結構 >
{
"127.0.0.1" : {
"theme" : {
"desktop"："desktop_theme",
"tablet" ：" tablet_theme",
"mobile" ：" mobile_theme"
}
}
sites.json 設定樣板

11.  在coServ中每個網頁都有區塊變數(bi)
 client: 判斷子端屬於何種裝置。
 用JavaScript去抓取bi.client.category來判斷裝置
 bi.client.category 參數：
'desktop' 表示是桌機，
'tablet' 表示是平板電腦，
'mobile' 則表示是手機。
在 JavaScript裡動態載入指定的CSS

12. 在js裡判定
ctrl.startup = function () {
var bi = '<%=JSON.stringify(bi)%>';
var bi_json = JSON.parse(bi);
if (bi_json .client.category == 'mobile') {
// mobile class
}
else if (bi_json .client.category == tablet') {
//tablet class
}
else {
// website class
}
}

13. 直接在html裡面判定
<% if (bi.client.category === 'mobile') { %>
<h2 class="mobile">This is mobile</h2>
<% } else if (bi.client.category === 'tablet') { %>
<h2 class=“tablet">This is tablet</h2>
<% } else { %>
<h2 class="desktop">This is desktop</h2>
<% } %>