移动端项目开发总结

时间:2024-03-07 20:20:33

技术总结

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.在项目开发前,应完整的了解项目的具体要求,清晰的知道,项目的整体效果。对项目开发过程中有何疑惑,应尽取得沟通并解决。