移動端項目開發總結

標籤：

技術總結

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.在項目開發前，應完整的瞭解項目的具體要求，清晰的知道，項目的整體效果。對項目開發過程中有何疑惑，應盡取得溝通並解決。

 

移動端項目開發總結