自我修煉第36天--Anson的博客換了個門面

在寫今天的文章之前,我想向大家介紹我用來寫文章的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)化過程中,主要遇到了兩個問題:

  1. 元素定位案站,并在不同瀏覽器和移動設(shè)備上的兼容問題躬审,健壯性不夠,如在OX平臺上safari和chrome渲染出來的邊距有差異蟆盐,耗費了很多時間在該問題上的調(diào)試承边,最終的解決方案也不夠優(yōu)雅;
  2. 移動設(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)化动壤,目前主要有以下兩個問題:

  1. 字體大小和選擇上影響了閱讀的感受萝喘,特別在移動設(shè)備上,未經(jīng)過處理狼电,導(dǎo)致標題字體過大蜒灰,十分不美觀;
  2. 在文章頁面上的導(dǎo)航條自動隱藏效果不佳肩碟;

堅持和不斷優(yōu)化吧强窖,騷年!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末削祈,一起剝皮案震驚了整個濱河市翅溺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌髓抑,老刑警劉巖咙崎,帶你破解...
    沈念sama閱讀 218,451評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吨拍,居然都是意外死亡褪猛,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評論 3 394
  • 文/潘曉璐 我一進店門羹饰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來伊滋,“玉大人碳却,你說我怎么就攤上這事⌒ν” “怎么了昼浦?”我有些...
    開封第一講書人閱讀 164,782評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長筒主。 經(jīng)常有香客問我关噪,道長,這世上最難降的妖魔是什么乌妙? 我笑而不...
    開封第一講書人閱讀 58,709評論 1 294
  • 正文 為了忘掉前任使兔,我火速辦了婚禮,結(jié)果婚禮上冠胯,老公的妹妹穿的比我還像新娘火诸。我一直安慰自己,他們只是感情好荠察,可當我...
    茶點故事閱讀 67,733評論 6 392
  • 文/花漫 我一把揭開白布置蜀。 她就那樣靜靜地躺著,像睡著了一般悉盆。 火紅的嫁衣襯著肌膚如雪盯荤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,578評論 1 305
  • 那天焕盟,我揣著相機與錄音秋秤,去河邊找鬼。 笑死脚翘,一個胖子當著我的面吹牛灼卢,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播来农,決...
    沈念sama閱讀 40,320評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼鞋真,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了沃于?” 一聲冷哼從身側(cè)響起涩咖,我...
    開封第一講書人閱讀 39,241評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎繁莹,沒想到半個月后檩互,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,686評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡咨演,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,878評論 3 336
  • 正文 我和宋清朗相戀三年闸昨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,992評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡饵较,死狀恐怖溉跃,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情告抄,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評論 5 346
  • 正文 年R本政府宣布嵌牺,位于F島的核電站打洼,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏逆粹。R本人自食惡果不足惜募疮,卻給世界環(huán)境...
    茶點故事閱讀 41,336評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望僻弹。 院中可真熱鬧阿浓,春花似錦、人聲如沸蹋绽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卸耘。三九已至退敦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蚣抗,已是汗流浹背侈百。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留翰铡,地道東北人钝域。 一個月前我還...
    沈念sama閱讀 48,173評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像锭魔,于是被迫代替她去往敵國和親例证。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,947評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,140評論 25 707
  • 【4D每日一煉 12th Day】 關(guān)注什么赂毯,獲得什么 A關(guān)注: 今天在銀川培訓(xùn)战虏,我特別希望今天的學(xué)員能有所收獲。...
    BentleyCui閱讀 145評論 0 0
  • 我是一個特別容易感動的人党涕,收到你們的禮物很開心烦感,雖然你們不能像以前一樣陪著我過生日,但是有你們的祝福我依舊很...
    大大大大大琴閱讀 207評論 0 0
  • 2017年7月30日 相濡以沫 晚上屁孩舞蹈培訓(xùn)班放假匯演膛堤,要求6點到場手趣,我這個喜歡掐著時間做事的毛病又犯...
    滋滋味味閱讀 154評論 0 0