移动端布局body | 头部导航条 | 底部导航栏 | 内容区 | 蒙层使用

body 

/* body默认样式 */
body{
    max-width: 640px;
    margin: 0 auto;
    background: #f8f8f8;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

关于body的这几个样式，它们的作用是：

max-width: 640px; 设置 body 最宽只能 640px，这是为了在一些超宽的屏幕（如：横屏的ipad）上，页面不至于被撑得太宽，我们这里限定屏幕像素大于 640px 的时候，只显示到 640px 这么宽。
margin: 0 auto; 当屏幕超宽时，保证内容区能水平居中。
background: #f8f8f8; 给页面设置一个浅灰色背景。
overflow-x: hidden; 横轴方向如果出现了超宽的元素，设置为隐藏，这样就能防止在X轴方向上出现滚动条。
-webkit-overflow-scrolling: touch; 在 ios 系统上，可以让滚动元素带有弹性，滚动的更顺滑。注意这条样式只是 webkit 内核提供的，只在基于 webkit 内核的浏览器上有效。

头部导航条

/* 头部导航条 */
.kv-header{
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    height: 2.3rem;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid #ddd;
}

这里面没有使用“left: 0;”来把标题栏放在窗口最左面，这是因为如果不给它限定水平方向位置，那么它起始的位置就时它脱离文档流之前的位置，也就是现在 body 的起始位置。这样在超宽屏幕下也能保证标题栏也在 body 的左上角，而不是屏幕的左上角。
box-sizing: border-box; 使用了怪异盒模型，是因为使用了border来分隔标题栏和内容区，这样标题栏的高度就是“height: 2.3rem;”所指定的高度了。
max-width: 640px; 和 body 统一，限定了最大宽度就是 640px，不限定的话导航条的宽度就变成了整个屏幕的宽度，在超宽屏幕下会造成错乱。

底部导航栏

/* 底部导航栏 */
.kv-navbar{
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    width: 100%;
    max-width: 640px;
    height: 2.5rem;
    border-top: 1px solid #ddd;
    z-index: 200;
}

这个文件的布局样式和导航条十分相似，只不过定位的时候使用的是bottom代替了导航条的top，把元素固定在了页面的底部。

内容区

/* 内容区 */
.kv-content{
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
}
/* 根据header和navbar自动适应内容区高度 */
.kv-header ~ .kv-content{
    padding-top: 2.3rem;
}
.kv-navbar ~ .kv-content{
    padding-bottom: 2.5rem;
}

• box-sizing: border-box; 使用怪异盒模型，是为了能正确处理后面的padding。
• position: relative; 内容区设置为相对定位，是为了让子元素在做绝对定位的时候以它为参照物。
• overflow-y: auto; 内容区高度超出屏幕高度的时候，自动出现滚动条。
• padding-top: 2.3rem; 内容区上方用内边距让出标题栏的高度，这样内容显示的位置正好在标题栏的下方，不会被标题栏遮住。
• padding-bottom: 2.5rem; 内容区下方用内边距让出导航栏的高度，滚动条拉到最下面时正好能把内容显示完整。

这样在默认的情况下内容区是没有上下内边距的，当页面有了标题栏的时候，再用兄弟选择器给 tt-content 元素设置上“padding-top: 2.3rem;”。同理，在有导航栏的时候，也用兄弟选择器给内容区设置上“padding-bottom: 2.5rem;”。这样就达到了内容区自适应的需求。

蒙层使用

/* 页面蒙版 */
.kv-mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    z-index: 300;
}