為了自己生活費衫哥，在學(xué)校 Assessment & Achievement Institute 兼職前端開發(fā)的工作。由于工作崗位僅面向?qū)W生，任務(wù)不重佳头，且工作時間靈活，工資也很優(yōu)厚晴氨，還是很感謝學(xué)校的康嘉。
第一個任務(wù)就是將一個網(wǎng)頁的表格改成自適應(yīng)布局，給移動端用戶一個良好的視覺呈現(xiàn)籽前。由于學(xué)校的網(wǎng)站都是由 Drupal 搭建的亭珍，前端界面通常都是通過 Drupal 提供的默認(rèn)組件和富文本編輯組合而成。雖然 Drupal 提供了自適應(yīng)的 theme, 但是網(wǎng)頁主體內(nèi)容的自適應(yīng)還需要前端人員單獨完成枝哄。
最初的表格是內(nèi)容編輯人員通過富文本編輯器插入表格編輯而成肄梨。Drupal 自動生成 width:100% 的表格。雖然非固定表格可以做到自適應(yīng)挠锥，但由于表格長度超出手機屏幕众羡，文字被壓縮成長條形，閱讀體驗十分糟糕蓖租。溫柔美麗的 PM Mellissa 只甩給我一句話粱侣，improve it on mobile辆毡。拿工資就要干實事，開始修改吧甜害。
首先改的就是其布局∏蜃颍考慮到手機和電腦不同的屏幕尺寸尔店，我確定了手機端采取縱向排列(默認(rèn)顯示第一項，折疊其余)主慰，電腦端橫向顯示（全顯示嚣州，不提供折疊）的設(shè)計方案。將 table 結(jié)構(gòu)的 HTML 代碼為 ul & li 結(jié)構(gòu)共螺。方便利用 CSS @media 屬性改變其布局该肴。
原來的 HTML 結(jié)構(gòu)是這樣的：
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
...
</table>
修改后的 HTML 結(jié)構(gòu)是這樣的：
<ul>
<li class="date">Sunday, October 11</li>
<li class="detail">
<ul>
<li class="time">All day</li>
<li class="event">IAEA Executive Committee Meeting</li>
</ul>
</li>
</ul>
之后是 CSS 部分，考慮到目前主流寬屏尺寸為1024px+藐不，設(shè)置1024px作為 CSS 樣式的分界線匀哄。我喜歡從小及大開始分析。當(dāng)尺寸小于1024px時雏蛮，保持 ul & li 原有的塊級屬性即可涎嚼，設(shè)置 width:100%，從上到下依次排開挑秉，利用 padding 屬性分隔即可法梯。
當(dāng)尺寸大于等于1024px，需要利用 float 屬性犀概、width 百分比自適應(yīng)立哑、margin: 0 auto 居中 將 ul&li 模擬成 table 顯示。注意 HTML 分層時考慮到最終的顯示效果姻灶，方便 CSS 在其上的運用铛绰，以免造成代碼過度復(fù)雜。
CSS 結(jié)構(gòu)如下：
/* Public Style */
.clearfix{}
/* Screen Size < 1024px */
@media screen and (max-width: 1023px) {
...
}
/* Screen Size >= 1024px */
@media screen and (min-width: 1024px) {
...
}
最后是簡單的 Javascript 完善木蹬，我希望在移動端可以額外提供點擊標(biāo)題展開詳情的功能至耻，默認(rèn)只顯示第一項的詳情。這樣更利于用戶在屏幕體積較小的情況下更快的搜尋到自己的目標(biāo)镊叁。利用 Jquery 的 click & slide 事件實現(xiàn)即可尘颓。
在此分享一下我寫 Javascript 的思路過程:
- 先寫成一步一步執(zhí)行的順序式代碼
var $obj1 = $(""),
$obj2 = $("");
var slideToggle = function(){};
$obj.bind("click",function(){ slideToggle(); });
...
- 提取公共項，轉(zhuǎn)成對象自變量的函數(shù)式代碼
var slideToggle = {
obj1: $(""),
obj2: $(""),
animate: function(){},
bind: function(){ this. animate(); },
initial: function(){ this.bind(); }
};
slideToggle.initial();
- 根據(jù)實際運用情況晦譬，轉(zhuǎn)成可擴展的面向?qū)ο蟠a
function SlideToggle(target, content){
this.target = target;
this.content = content;
}
SlideToggle.prototype = {
animate: function(){},
bind: function(){ this.animate(); },
initial: function(){ this.bind(); }
};
var slideToggle = new SlideToggle("", "");
slideToggle.initial();
經(jīng)驗:
HTML,CSS,Javascript強烈建議分離疤苹，方便以后修改。
-
CSS盡量調(diào)用class而不用id敛腌，CodePen提醒我的卧土。 -
CSS可以使用Sass更精簡惫皱，Javacript盡量多思考，多優(yōu)化尤莺。
思考完了后旅敷，自己先在 CodePen 上做成 Demo 測試, 避免直接修改造成網(wǎng)站出錯同時易于合作分享。
下面是 Demo 鏈接颤霎，需要看源代碼的童鞋可以點擊查看媳谁，歡迎提供修改意見：
Responsive-Table Demo。
IN THE END, 附網(wǎng)站最終實例動圖:
路漫漫其修遠(yuǎn)兮友酱，吾將上下而求索晴音。-- 屈原
