用html5做的移动端网站有什么好处

1. 上手迅速并支持快速迭代，与Android和iOS相比，使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。此外，要使用原生代码将一个list view连接到远程的数据源并具有漂亮的外观是十分复杂的

2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦：为手机开发应用，尤其是iOS系统的手机，最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户，需要等待一个相当长的过程（需要好几天，甚至可能是好几周）。不仅在第一次发布程序时要经历磨难，以后的每一次升级也是如此。这使得QA和发布流程变得复杂，还会增加额外的时间。进一步的好处是，发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了！不需要考虑iOS令人抓狂的DRM，也不需要理会Android必须的APK。

3.支持跨平台和跨设备开发：一个巨大的好处是，应用程序马上可以在Android和IOS上工作，同样也可以在其他平台上工作。作为一个独立开发者，为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作，为每个平台重复做类似的事情需要大量的资源。

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。

1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。

具体代码：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'

}