移动端项目开发总结-html教程-PHP中文网

移动端项目开发总结

PHP中文网

发布： 2016-08-30 09:21:10

原创

1289人浏览过

对于这次移动端页面开发，新接触到的东西不少，首要的一个就是响应式布局，在移动端页面开发中，需要考虑到移动端各种不同的屏幕大小而使用不同的布局来呈现出想要的效果，在小屏幕的移动设备中。可能需要减少页面中的信息量，并且改变原有的布局方案，采用适用于移动端的布局方案。而在中等屏幕大小的移动设备中，如平板，则需要考虑横屏、竖屏等情况下的布局方案。由这些需求延生出来的，就是所谓的响应式布局解决方案，响应式布局重点在于可以通过媒体查询来为不同屏幕大小的设备使用不同的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）！

简单库存管理系统

本系统是一个基于工厂模式的三层架构项目，基于VS2005 开发，结构简洁，配合动软Codematic代码生成器，可以使开发效率事半功倍，倍感轻松。本系统主要功能 1，物品类别管理实现了物品类别的添加、修改、删除功能，方便库存物品分类管理。 2，物品管理实现物品添加、修改，管理员可实时对物品做出库、入库记录，也可查看详细历史出入库记录。 3，商家管理实现商家添加、修改、删除功能，方便公司和客户