服务购

　　h5与原生最大的优势就是跨平台,原生App又有h5所达不到的地方,例如操作流畅度,下面随小编一起看看用h5怎么开发app吧。

　　Meta标签中的ViewPort属性：ViewPort是承载代码层的一个View视图，而手机浏览器看到网页是承载ViewPort视图。因此，手机看到的层级关系，从上到下：代码View视图->ViewPort视图->浏览器视图。

　　所以我们只需要修改ViewPort这一层的属性，比如缩放等，即可对手机进行响应式布局，即安卓的自适应布局。

　　步骤一：搭建工程目录结构

　　步骤二：在index.html中声明ViewPort，输入meta：vp按下tab键自动生成，规定宽度为手机宽度，缩放比例为1

　　步骤三：由于每个浏览器的默认边距，默认属性的不同，我们需要全部初始化一遍，达到适应不同浏览器。

　　编写我们的common.css文件，记得在index.html中导入

　　步骤四：编写index.html文件

　　步骤五：编写index.css，来对这个layout类进行布局

　　1、导航栏实现：导航栏使用css的position=fixed和z-index=1000，使它固定在顶部并在网页的最上层，左边的icon和右边登陆按钮使用绝对位置来调整距离左边右边上边的距离，而中间的form表单只要Padding-Left和Padding-Right就可以随屏幕伸缩。

　　2、自动轮播效果实现：这里使用了jQuery 的一个js开源库unslider。

　　3、十个选项按钮实现：使用一个列表，设置每一个li为块元素，宽度为20%，并且让10个选项左浮动，就可以自动排好两行。

　　以上就是小编为大家带来的用h5怎么开发app，希望对大家有所帮助。