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开发的移动微站