移动端网页使用的是响应性设计，但我们通常看到的网页是跳转刷新的。 例如，单击一个menu进入另一个页面
就今天而言，这是移动端的一页布局。 单个页面是所有操作和布局都在一个页面下完成的，不需要跳转，简单来说就像普通的选项卡
但是他在手机旁边，以为是页面，所以比标签要复杂一点。
单页面的作用和好处：
嵌套在朴素中实现APP的混合开发
2 .数据量少的页面一页容易开发和维护
3 .跳转页面的响应不需要加快
代码实践
一页的html结构
复制代码
html5移动终端的单页面布局
Html5Css3JavascriptAbout复制代码
注：页面上的照片均来自dribbble
在demo中我使用的都是图像的静态展示，你可以添加自己的结构和动态程序
页面结构和我们平时写的标签没什么区别。 接下来，用css装饰这个结构，让他在手机上看到页面的效果
2 css
复制代码
/*CSS初始化*
*{ margin:0； padding: 0； }
li{ list-style-type: none； }
img{ max-width: 100%； 显示： block； margin: 0 auto 5px auto； }
html，body{ width: 100%； height: 100%； 背景： # e4e4e 4；
-维基百科-高亮度颜色： rgba (88、44、22、0.9 )；
-网络工具包- touch-callout : none；
-webkit-user-select: none；
}
/*主体页面样式*
. main{ width: 100%； height :自动； position: relative； }
. main section{ width: 100%； height :自动； 位置： absolute； left: 0； top:0； }
. main section.hide { display : none； }
. main section.curr { display : block； }
/*菜单样式*
. menu{ width: 100%； height: 45px； 定位：固定； bottom:0； left:0； box-shadow: #2d2d2d 0 0 4px； 背景： # 0099抄送； }
. menu.menu curr { background : # ea4c 88； }
. menu ul{width: 100%； height: 100%； }
. menu li{ width: 24.9%； height: 100%； 浮点：左； line-height: 45px； 文本对齐3360中心； 背景： # 0099抄送； color:#fff； }
. menu Li.curr { background : # ea4c 88； }
. menuLi:nth-child(1， menuLi:nth-child ) 2， menuLi:nth-child )3) border-right33601pxsolid }
复制代码
移动端页面通常通过使用百分比或媒体查询设置页面宽度的高度来提高响应速度
我在这里说明几个
1.- WebKit-tap-highlight-color : rgba (0，0，0 )； 也可以写为WebKit-tap-highlight-color : transparent； 如果取消单击时的高亮显示，也可以更改中的参数，以获得所需的单击显示的高亮效果
2.-微信- touch-callout : none； 长按//页不会触发系统菜单
(责任编辑：幽灵学院)