行動端專案開發總結

對於這次行動裝置頁面開發，新接觸到的東西不少，首要的一個就是響應式佈局，在行動裝置頁面開發中，需要考慮到行動端各種不同的螢幕大小而使用不同的佈局來呈現出想要的效果，在小螢幕的行動裝置中。可能需要減少頁面中的資訊量，並且改變原有的佈局方案，採用適用於行動裝置的佈局方案。而在中等螢幕大小的行動裝置中，如平板，則需要考慮橫屏、垂直螢幕等情況下的佈局方案。這些需求延生出來的，就是所謂的響應式佈局解決方案，響應式佈局重點在於可以透過媒體查詢來為不同螢幕大小的裝置使用不同的css樣式，在這種情況下就能直接做到適應不同螢幕大小的設備，而不用為不同的設備寫不同的頁面，只需要一個HTML檔案和CSS檔案就能搞定。

要使用響應式佈局首先需要在頁面頭部的元資料標籤中設定"viewport"，並在其中設定響應式佈局所需的一系列參數。 "viewport"設定好後就可以在css中寫入媒體查詢來為不同螢幕大小的裝置使用不同的佈局方案。

#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>

以上就是行動端專案開發總結的內容，更多相關內容請關注PHP中文網（www.php.cn）！