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

猜你喜欢

转载自xiaoyan2017.iteye.com/blog/2272221
今日推荐