移动端项目开发总结

技术总结

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

时间: 2024-10-21 20:34:36

移动端项目开发总结的相关文章

移动端项目开发心得

通过这次项目开发,使我对布局有了更深层次的理解,对float和position的运用也更得心应手.体会到float和position对页面的负面影响.其中,position:absoulte/fiexd会让元素脱离文档流,其后面的元素(暂且称为候补元素吧)会占据原来的位置,需要对候补元素的margin padding做出相应调整:而float同样会让元素脱离文档流,后面的元素同样会占据其原来的位置,不同的是,其候补元素的内容会环绕在float元素周围. position: <head> <

H5移动端项目案例、web手机微商城实战开发

自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端电商的发展起到个很好的催化剂.之前对于H5移动端的开发也做过一些项目,这段时间就整理之前的知识,做了个功能更加完善的一个webApp移动端微商城,算是一个不错的H5+css3项目案例实战. 项目截图: 原文地址:https://www.cnblogs.com/xiaoyan2017/p/837286

AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

AngularJS项目开发技巧之localStorage存储 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStorage的存储.如下图左所示,二维码生成完毕包含信息如下图左所示,实际二维码信息如下图右所示: 经过测试发现二维码实际存储的是上一次的结果.好熟悉~Bingo,自己做导航栏高亮时就遇到过这个问题,当时就是使用的localStorage.问题还是出在localStorage身上.但是存储时:localStorage.setItem(key,value),如

Android 实践项目开发 总结

  Android 实践项目开发 总结 课程:移动平台应用开发实践  班级:201592  姓名:杨凤  学号:20159213 成绩:___________       指导老师:娄嘉鹏          实验日期 :2015.12.06. 实验名称:                   android 百度地图开发 实验目的与要求: 1.实现定位 2.查询公交路线       3.目的地查询 实验目的: 在这次的项目开发中,我做的软件主要功能是调用百度地图的接口,实现定位.查询公交路线 和查

Android手机通讯录项目开发--联系人数据库contacts2.db介绍

项目描述:该项目为基于Android平台的手机通讯录,主要模块分为四个部分:联系人管理模块,通话记录管理模块,短信管理模块,系统设置模块. 系统结构图如下: 本项目启动时间:2014年5月28日 说明:本次开发项目的所有源码全部会分享给大家.开发此项目的目的有这几点:一.锻炼独立开发项目的能力,二.增加对Android开发的了解,三.熟悉Android通讯录机制. 闲话不多说,正式开始! 技术要点一:熟悉Android联系人数据库contacts2.db 1.获得联系人数据库contacts2.

移动端webapp开发必备知识

移动端webapp开发必备知识 移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixe

移动端跨平台开发干货分享

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 第一次推荐国内技术专家的文章,涉及的是移动端跨平台开发的话题. 之前NativeScript 1.0发布的时候,就打算谈谈移动端跨平台开发这个话题.正好,今天国内技术专家"吴多益"发表了一篇文章<聊聊移动端跨平台开发的各种技术>就这个话题,给大家分享了很多干货. 为什么大家对移动端跨平台开发总是孜孜不倦的追求,各种框架也是层出不穷呢?究其原因,还是由于纯HTML在手机

用互联网思维来开发客户端软件——项目开发小结

随着智能手机.平板电脑的快速发展,台式电脑在个人用户那里已经没落了,但是台式电脑仍然是企业用户工作中的主要工具,且具有不可替代的作用.客户端软件在企业级用户那里有着不可替代的作用,结合时代发展,我们应以互联网思维来做好企业级应用客户端软件?研发快速迭代.快速试错,把大功能拆分成小功能,分阶段实现,追求微创新. 通常企业级应用的客户端,就是企业管理应用系统,一般分为BS与CS两种架构,CS架构要求在用户的电脑上装上客户端与数据库,或者数据库安装在数据库服务器上.这种方式我们经常会碰到一些问题,比如

[Openwrt 项目开发笔记]:Openwrt必要设置(二)

前面的两篇blog中,我将如何搭建Openwrt的开发.编译.调试以及烧写环境的方法一一列出了.从本文开始, 我将介绍如何一步一步进行Openwrt设置,以满足路由器作为智能家居网关的功能. ok,闲话休提,开始上干货. 一.Openwrt初始配置 1. 密码设置 当我们成功地将Openwrt刷入路由器后,路由器会经过大约4~5分钟的时间重启(以Netgear Wndr3700为例).待路由器启动之后,用一根网线与路由器LAN口直连,并将PC的IP设置到192.168.1.*网段. 提示:不同的