![](http://ffanson.qiniudn.com/FFAnson/gh-pageblogDraft.jpg-indexRectangle1)
在寫今天的文章之前,我想向大家介紹我用來寫文章的Markdown工具。Markdown是一款十分輕量的標記語言,它輕量到足以讓你可以將寫作的注意力就集中在寫作上,關(guān)于Markdown更加詳細的介紹和相關(guān)的工具在網(wǎng)上有十分多跪呈,搜搜就是了。而我用于寫作的Markdown工具是一款webAPP取逾,叫做作業(yè)部落Cmd Markdown,無需安裝耗绿,云保存和同步,你點一下就知道有多好的砾隅。今天是作業(yè)部落發(fā)布第八次更新误阻,也是我的博客的第一次更新。今天就談?wù)勥@次我博客更新的感受和經(jīng)驗晴埂。話說兩天更新一個博客還真有點慢究反,差太遠了。
題圖是我的預(yù)設(shè)草稿和最終實現(xiàn)的效果儒洛,跟預(yù)想還是有出入的精耐。這次的更新主要有以下幾點:
- icon由方形換成了圓形;
- 增加了蘋果移動設(shè)備上的添加至主屏幕圖標琅锻;
- 使用七牛優(yōu)化了圖片卦停,降低了圖片的大小,加速了文檔的加載加載恼蓬;
- 更換了全局版式和文章頁版式沫浆,刪除了主頁文章索引上的圖片,突出了文章內(nèi)容滚秩;
- 文章頁的導(dǎo)航條可自動隱藏;
- 使用了層疊字體淮捆;
因為原來博客的主題是下載下來的郁油,而且沒有相應(yīng)的說明文檔本股,再加上技術(shù)上的不熟練,使得在這次這么大動作的優(yōu)化下桐腌,占用了較長的時間拄显。在這次的優(yōu)化過程中,主要遇到了兩個問題:
- 元素定位案站,并在不同瀏覽器和移動設(shè)備上的兼容問題躬审,健壯性不夠,如在OX平臺上safari和chrome渲染出來的邊距有差異蟆盐,耗費了很多時間在該問題上的調(diào)試承边,最終的解決方案也不夠優(yōu)雅;
- 移動設(shè)備上的響應(yīng)布局石挂,在解決該問題上主要用了viewport和media query的方法博助,在臺式設(shè)備上適應(yīng)不同的瀏覽器視窗大小,meidiaquery應(yīng)該使用min/max-width,在移動設(shè)備上用的是min/max-device-width進行相應(yīng)的響應(yīng)布局痹愚,并且可以使用zoom進行viewport的縮放富岳。據(jù)說froont是一個在線的可視化響應(yīng)布局神器,下次可以試試使用拯腮。
因為我的博客定位就是一個記錄和閱讀的工具窖式,所以這次的更新集中在版面美觀和減少不必要的元素避免分散閱讀的注意力的優(yōu)化上,但仍有很多細節(jié)問題需要繼續(xù)優(yōu)化动壤,目前主要有以下兩個問題:
- 字體大小和選擇上影響了閱讀的感受萝喘,特別在移動設(shè)備上,未經(jīng)過處理狼电,導(dǎo)致標題字體過大蜒灰,十分不美觀;
- 在文章頁面上的導(dǎo)航條自動隱藏效果不佳肩碟;
堅持和不斷優(yōu)化吧强窖,騷年!