H5编写页面初探

        学过js、css和html后,总期望有一次实践的机会,本次通过实践H5页面编写,深深体会到前台开发 的不易,学习必须要引用到实践中才能暴露问题呢!

       

        H5通俗理解就是HTML经过5次修改后的标准规范,目的为支持移动端上支持多媒体,它具有解析灵活,兼容性好,跨平台,支持多媒体等特性,增加了用户体验度。

【实践经验】

        1. 页面设计首先要根据用户需求,根据用户提供的页面进行划分模块设计。

                                                         

       上面的实例将整个页面画成了5部分,表头(1)是通过设置H5表头实现的;(2)和底部工具按钮(4)是属于固定不能动的页面部分;(3)属于自由扩展部分,数据增多的情况下应该提供下拉框;(5)则属于隐藏部分,点击页面按钮才会显示。

       2. 测量各个图片,文字等信息距离屏幕边界的距离。移动端屏幕大小不一,我们必须适应主流手机屏幕,平板设备等等。

                                    

        小技巧:这里可以通过ps进行测量:方法一、调出ps的信息窗口(窗口--信息),使用选区工具选择要测量的部分,信息工具栏就可以显示长宽信息,要想显示的信息是像素则点击下图的红框部分,选择面板选项进行设置。

                                                        

        方法二、直接使用ps的标尺工具,它支持导出txt文本;

        3. 先使用写死的宽高和定位方式编写静态的html页(操作熟练者可以省略此步骤)和静态属性(比如字体颜色),这样有助于我们整体感知。

        4. 对每一模块内部再次通过div包装的方式(个人觉得div是最亲切的html元素,简单实用),设置模块的浮动方式以后必须要注意它对下面模块所造成的影响。

        5. 页面元素重叠方法,设置定位方式为position:absolute,然后按照需要设置z-index:0属性,数字越高的页面元素放到上面。

        6. 编辑页面的动态属性(主要是元素的大小信息,字体大小,定位距离等等),以便适应不同屏幕大小。

         获取屏幕宽高的方法:

                    var html = document.documentElement;
                    var windowWidth = html.clientWidth;
                    var windowHeiht = html.clientHeight;

         根据屏幕大小改变的方法,以下自适应元素的宽度:

                    document.getElementById("img2").style.width = 83 / 1334 * windowHeiht + "px";

         7. 技巧:页面上相差不大的部分可以选择class进行标识,这样可以统一设置样式,减少冗余代码;不建议使用js和css提出来写的方式,移动端客户对速度的请求是很苛刻的,不要因为增加请求,降低运行速度。

【出错总结】

         1. 调试页面的时候要注意大小写,比如根据函数获取margin-top方法,要写成

                   document.getElementById("img2").style.marginTop

            第二个字母一定要大写,否则调试不会报错,但也达不到自己想要的效果。

         2. 注意自己的元素是用class还是id进行标识,调用方法的过程中很容易忽略。

【总结】

        在前台开发过程中要求我们有一定的抽象能力,跟我们的后台框架比起来,它并不逊色,需要我们考虑如何解耦以及以后的扩展问题,数据如何介入等等问题。一点点摸索实践中。。。

        






       

评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值