html+移动端下单页面,html5移动端单页面布局

移动端的web网页使用的是响应式设计，但一般我们看到的网站页面都是跳转刷新得到的，比如通过点击一个menu后进入到另一个页面

今天来说下是移动端的单页面的布局。单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ，再通俗的说就是类似于平常的选项卡

但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面

单页面的作用以及优势：

1.嵌套到native里实现app的混合开发

2.数据量小的页面用单页面便于开发和维护

3.无需跳转页面响应更快

代码实践

1 页面html结构

注：页面图片均来自dribbble

demo里面我用的全是图片静态展示 你可以添加自己的结构或动态程序

页面结构跟我们平常写的选项卡没什么区别，接下来我们用css装饰这个结构让他在手机上呈现出页面的效果

2 css

/*初始化css*/

*{ margin:0; padding: 0;}

li{ list-style-type: none;}

img{ max-width: 100%; display: block; margin: 0 auto 5px auto;}

html,body{ width: 100%; height: 100%; background: #e4e4e4;

-webkit-tap-highlight-color: rgba(88,44,22,0.9);

-webkit-touch-callout: none;

-webkit-user-select: none;

}

/*主体页面样式*/

.main{ width: 100%; height: auto; position: relative;}

.main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; }

.main section.hide{ display: none;}

.main section.curr{ display: block;}

/*菜单样式*/

.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}

.menu.menucurr{ background: #ea4c88;}

.menu ul{width: 100%; height: 100%; }

.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}

.menu li.curr{ background: #ea4c88;}

.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}

移动端的页面多数情况下用百分比或者媒体查询来设置页面的宽高度 这样会达到响应的效果

这里解释几点

1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以写成-webkit-tap-highlight-color: transparent; 去掉点击时高光显示 你也可以更改里面的参数 达到你想要的点击显示高光效果

2.-webkit-touch-callout: none; //长按页面时不触发系统菜单

(责任编辑：幽灵学院)