构建移动端webApp开发、手机网站开发、mobile微商城开发

HTML5移动web站点、移动端微站、掌上微商、移动端web开发、手机网站webApp开发、mobile微商城开发、运用最新HTML5+CSS3+iScroll+touchSwipe+Zepto等技术构建移动手机端web站点，不借助任何前端框架，大小保证、运行流畅！！！

 

HTML5新增标签：
在html5中新增量很多标签，加强连html标签的语义化，如下图：

等等，这些标签都各自有自己大意义，不再仅仅是span和div，虽然html4中也有很多语义化的标签，但是不如html5丰富。除了这些新增的标签，还有一些此前就有的标签，但是类别新增，最具代表性的就是表单form，而本文要介绍的就是form。

以上除了type=text外，其他的都是新增的，如果浏览器支持这些属性的话，就会自动调用相应组件，如在移动设备中type=number/email/text时，浏览器会调用不同版面的键盘，这样加快用户的输入，体验也更美好。

 

/* 使用@media及css最新calc、rem、vw等来适配移动端 */
@media (min-width: 320px) {
    html {
        font-size: 100%; 
    }
}
@media (min-width: 360px) {
    html {
        font-size: 112.5%;
    }
}
@media (min-width: 384px) {
    html {
        font-size: 120%;
    }
}
@media (min-width: 400px) {
    html {
        font-size: 125%;
    }
}
@media (min-width: 540px) {
    html {
        font-size: 168.75%;
    }
}
@media (min-width: 600px) {
    html {
        font-size: 187.5%;
    }
}
@media (min-width: 640px) {
    html {
        font-size: 200%;
    }
}
@media (min-width: 720px) {
    html {
        font-size: 225%;
    }
}
@media (min-width: 768px) {
    html {
        font-size: 100%;
    }
}
html {
	font-size: calc(100vw / 320 * 16);
}

 

对于只需要适配手机设备，使用px即可；
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备；
关于上面的几个css3新单位【rem / vw / calc】定义可参考：
CSS3的REM设置字体大小、
CSS3的calc()使用、
CSS3 长度单位 vw  ,(这篇讲解的还不是很全，可以自己网上搜索理解)；

 

下图是使用最新的HTML5+css3开发的移动微站