成航先森網站改版-完成移動設備訪問自適應

編輯：狂族晨曦 來源：經驗雜筆 日期：2016-03-29 閱讀： 9,535 次 13 條評論 » 百度已收錄

成航先森，成都航院計算機系一個學生的個人網站。

磕磕碰碰，從去年6月19日建站以來，終于本站又迎來了一個大的改版。本次改版主要針對的是網站的自適應，即根據訪問者屏幕的寬度，調整網頁布局。

以前先森采用的是PC端使用先森自己制作的主題，手機端使用"WordPress Mobile Themes"插件，將移動端的訪問設置為知言Tinection主題。這個主題提供收費和免費兩個版本，小站當然用的免費版本。本來用著還好，但是先森始終覺得手機端用這個主題，顯得非常的不流暢，近期更是產生了圖片不顯示的問題。先森真好有空，索性就開始網站自適應制作了。

曾經在貼吧里就有站長提醒先森，手機端上Tinection主題不怎么好用，現在看來確實不怎么合適。

經過幾天的鼓搗，終于將這個自適應做出來了。如果有站長朋友訪問可以看出，網站有點知更鳥 鳥叔的Begin主題的痕跡。Begin主題是收費主題，售價299元。收費主題的前端代碼當然寫的夠好，先森也只能借鑒前輩了。來看看本站在各終端的樣式：

主題各終端樣式

上圖可以看出，此次本站對各終端的顯示還是比較適配的。先森通過百度站長工具的移動適配中的移動友好度檢測了一下，這次終于不是以往的各種優化建議了：

百度移動友好度

雖然現在網站的各方面還有一點小問題，但是先森會竭盡所能的修復的。如果網友們發現了什么BUG，希望能在下面的評論區提醒先森（拜托拜托~~）。

通過這次的實戰，先森學到了很多前端設計方面的技能，尤其是CSS和JS。CSS中規定元素定位類型的position 屬性，決定浮動的float屬性，清除浮動用的clear屬性等等，這些先森會慢慢的整理分享出來。

為了緬懷過去，先森也將網站的改版前的首頁全圖貼出來：

改版前的成航先森

本文開頭也寫了，本站終于“又”迎來了一個大的改版。之所以說“又”，是因為本站之前不叫“成航先森”，而是“成都航院計算機工程系”。而改名的原因，就是與官網產生了沖突。曾今先森改版的時候也很糾結，所以發文一篇：

• 糾結，建站

“成航先森”這個名字，是先森征求了很多同學的意見，很多朋友幫忙想了很多很多的名字，最終選定了這個名字，并一路走到現在。真的很感謝先森的這些朋友們。先森有些文章的開頭，帶上了“【先森有友】”，這些都是朋友們的日志，或者讓先森分享的技能。

兩次改版，一次是被動的，糾結的；一次是主動的，高興的。雖然不知道本站能走多遠，但先森希望能盡力的走下去。