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

編輯：狂族晨曦 來(lái)源：經(jīng)驗(yàn)雜筆 日期：2016-03-29 閱讀： 9,540 次 13 條評(píng)論 » 百度已收錄

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

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

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

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

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

主題各終端樣式

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

百度移動(dòng)友好度

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

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

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

改版前的成航先森

本文開頭也寫了，本站終于“又”迎來(lái)了一個(gè)大的改版。之所以說(shuō)“又”，是因?yàn)楸菊局安唤小俺珊较壬保恰俺啥己皆河?jì)算機(jī)工程系”。而改名的原因，就是與官網(wǎng)產(chǎn)生了沖突。曾今先森改版的時(shí)候也很糾結(jié)，所以發(fā)文一篇：

• 糾結(jié)，建站

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

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