移動端項目開發總結

技術總結

1.爲了讓網頁適應不一樣的手機尺寸，在此次項目開發中，對於各個模塊與頁面尺寸都儘量的使用百分比做爲單位，使之能都夠自適應。

如導航欄，在此項目中導航欄有四個按鈕均等的分佈在頁面的下方，如果同以往開發PC端的方式用邊距（padding、margin）來佈局，一旦改變屏幕尺寸，按鈕沒有自適應，佈局也將沒有達到想要的效果，而爲了解決這個問題，我將<a>標籤的寬（width）設置爲25%。

#nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 136px;
    background: #fff;
}
#nav a{
    width: 25%;
    height: 135px;
    position: relative;
}
#nav a span{
    display: block;
    margin: 15px 0 0 47px;
}
#nav a p{
    margin-left: 55px;
    font-size: 26px;
    color:#000;
    position: absolute;
    bottom: 15px;
}

<nav id="nav" class="test">
            <a href="index.html" class="fl">
                <span class="img icon-6"></span>
                <p>首頁</p>
            </a>
            <a href="category.html" class="fl">
                <span class="img icon-7"></span>
                <p>分類</p>
            </a>
            <a href="search.html" class="fl">
                <span class="img icon-8"></span>
                <p>發現</p>
            </a>
            <a href="personal-information.html" class="fl">
                <span class="img icon-9"></span>
                <p>個人</p>
            </a>
        </nav>

2.將代碼組件化，使之可重複使用，減小重複代碼與工做量，加快項目開發速度。

將代碼組件化，對技術方面其實沒有要求，更多的是在項目開始前，對項目的一個總體的分析與思考。

因爲沒有什麼技術上的特色，本次不在此展示多餘的代碼。

心態總結

1.移動端頁面佈局簡單且內容較於PC端的頁面少，故對項目不夠重視。但也所以沒有花太多時間在佈局上的思考，到後期修改自適應時嚐到惡果。

2.在項目開發前，應完整的瞭解項目的具體要求，清晰的知道，項目的總體效果。對項目開發過程當中有何疑惑，應盡取得溝通並解決。