個人主頁搭建總結

最近一直琢磨著寫一個個人主頁,一番研究之后決定使用Jekyll在Github Page上搭建主頁。用了一天半的時間,實現了網站的基本功能。
搭建過程中使用了Semantic UI這一CSS框架,DOM操作使用Vue.js。
歡迎訪問: https://epplalee.github.io/


下面總結下這一天半的新收獲:

  • Liquid模版引擎
    因為Jekyll內置的是這個模版引擎,所以決定現學現用,然而它的文檔真的清晰又詳細(不過是英文的),用起來很順手。
  • CSS3動畫
    網頁左側的側邊欄(sidebar)在伸縮時用到了CSS3中的transition和animation特性完成了動畫效果。
  • 媒體查詢
    使用媒體查詢實現了移動端的優化。

踩到的坑:

  • 手機瀏覽器顯示的分辨率是要大于它的設備分辨率的,我一開始寫媒體查詢的時候沒有用到device-width這個參數,導致移動端兼容失效,后來將
@media (max-width: 768px){
    settings...;
}

改為了

@media (max-device-width: 768px){
    settings...;
}

之后,移動端的優化就能正常顯示了。


待完善的功能:

  • 使用viewport優化移動端的閱讀體驗
  • 實現搜索功能(等文章多了再來做)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,328評論 0 11
  • 筆記參考自《響應式Web設計:HTML5和CSS3實踐》,2013年出版內容說不上最新。如下是全書的章的目錄:第 ...
    于曉魚閱讀 947評論 0 1
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • 因為有機會參與一個項目的早期設計,因此搭建的時候不可避免的遇到了如何滿足響應式的問題。翻閱了《響應式Web設計:H...
    tangyefei閱讀 6,453評論 2 90
  • 哪些事件促成了我自己英語學習的發展? 1,英語啟蒙老師李寧。她讓我覺得英語很有魅力。還有她對二姨夸我,說我學得太快...
    淑華_6c8b閱讀 164評論 0 0