成航先森網(wǎng)站改版-完成移動設(shè)備訪問自適應(yīng)

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

成航先森，成都航院計算機(jī)系一個學(xué)生的個人網(wǎng)站。

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

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

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

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

主題各終端樣式

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

百度移動友好度

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

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

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

改版前的成航先森

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

• 糾結(jié)，建站

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

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