移动端项目开发总结

对于这次移动端页面开发，新接触到的东西不少，首要的一个就是响应式布局，在移动端页面开发中，需要考虑到移动端各种不同的屏幕大小而使用不同的布局来呈现出想要的效果，在小屏幕的移动设备中。可能需要减少页面中的信息量，并且改变原有的布局方案，采用适用于移动端的布局方案。而在中等屏幕大小的移动设备中，如平板，则需要考虑横屏、竖屏等情况下的布局方案。由这些需求延生出来的，就是所谓的响应式布局解决方案，响应式布局重点在于可以通过媒体查询来为不同屏幕大小的设备使用不同的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><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/code/10604" title="EDEN-MACE分销管理系统"><img
                                                                                src="https://img.php.cn/upload/webcode/000/000/013/176293800919508.jpg" alt="EDEN-MACE分销管理系统"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/code/10604" title="EDEN-MACE分销管理系统">EDEN-MACE分销管理系统</a>
                                                                        <p>EDEN-MACE分销管理系统是微服务下的分销管理利器，更加灵活的管理佣金，涵盖并且总结了目前流行的分销模式，让分销更加简单，后期开发立足于产业互联网，致力于打通产业内部之间的联系。 产品亮点1、权限和分销完全分离，符合开发的低耦合的需求。2、产品完全可配置化，仅需要少量改动3、采用微服务思想，和原业务低耦合 ，不需要的时候可以随时下线。4、可视化图形化界面统计。5、完善化的账务体系，可追溯每一笔</p>
                                                                </div>
                                                                <a href="/xiazai/code/10604" title="EDEN-MACE分销管理系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
            </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）！