Home > HTML5&CSS3 > WEBAPP实践之H5架构布局篇

WEBAPP实践之H5架构布局篇

一个合理的单页WEBAPP的布局如何诞生

俗话说千里之堤毁于蚁穴,根基不稳,大厦再高也终究会倒,可见好的基础是多么重要,对于一个WEBAPP项目来说,HTML结构就是基础,那么一个好的HTML结构是要支撑起整个项目的推进及交互代码的迭代的,它首先要满足整个项目的需求,既然是要替代native的产品,那么它的设计就应该朝着native app的目标去实现所有功能和交互,首先来看一个典型的页面:

A区域:APP的头部导航区域,即navigation,由页面标题、返回、回首页、切换等功能按钮组成,固定不滚动;

B区域:APP的主体内容区域,展示内容及列表等,可滚动;

C区域:APP的底部菜单区域,通常用以展示底部频道菜单、筛选项、价格结算栏等,固定展示;

很显然,根据APP的功能区域,我们可先划分出三大标签块用来布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>frame page</title>
 
  </head>
  <body>
    <header>
      This is header!
    </header>
 
    <!-- page slide container S -->
    <section class="main">
      <!-- single page -->
      <article class="page">
         <div class="container">
            main flied content
         </div>
      </article>
    </section>
    <!-- page slide container E -->
 
    <footer> fixed footer content </footer>
 
  </body>
</html>

添加样式,各归其位

首先阐述一下,此项目所采用的架构,即单页面设计,采用zepto框架结合iScroll(神马这两个工具不知道?请自行百度)来实现单屏页面滚动(一屏之内是不会出滚动条的),即body上面不发生自然滚动,页面内部超长内容的滑动靠iScroll来模拟,流畅与坑并存着!so,然后具体来看写法

首先,让body的高度宽度撑满整个浏览器的可见区域,这样一个最大化的平台就算搭建起来了:

1
2
3
4
5
6
7
body { // app window
  width: 100%;
  height: 100%;
  min-width: 320px;
  overflow: hidden;
  background-color: $base-bg-color;
}

 

对于头部区域,作为公共区域它是要固定在顶部,因此这里让它脱离文档流,用了absolute的方式固定它:

1
2
3
4
5
6
7
8
9
header { // common navgation header
  position: absolute;
  z-index: 2;
  top: 0;
  width: 100%;
  height: $nav-height; // navgation height
  background-color: $base-bg-blue;
  text-align: center;
}

 

对于主体区域,属于正常文档流,同时是真正的页面容器,用来展示单一一个页面的主舞台(暂且这么定义):

1
2
3
4
5
6
7
8
.main { // pages slide container
  position: relative;  
  width: 100%;
  height: 100%;
  padding-bottom: 45px;
  overflow: hidden;
  box-sizing: border-box;
}

对于footer,虽然是固定在底部不动,按常理应该用fixed属性,但是!你懂得在IOS和安卓个版本的手机中,这种属性实在是难以驾驭,而我们的项目兼容性要求又很高,因此要采用技术流的打法来处理了,先正常流与mian下方,这时候是在舞台外面的被overflow掉,然后用margin-top负值再来上去,刚好贴底边,这样既能模拟固定在底部的效果,又能处于正常文档流中,规避了很多键盘弹起错位的BUG:

1
2
3
4
5
6
7
footer { // common footer
  position: relative;
  z-index: 5; // higher than the bottom slider
  width: 100%;
  max-height: 45px;
  margin-top: -45px; 
}

最后,我们可以看下demo效果如何:http://nirvana.sinaapp.com/examples/frame.html

原创文章,转载请注明: 转载自CSS ARTIST-前端开发生活日志

本文链接地址: WEBAPP实践之H5架构布局篇

回复 (2) to WEBAPP实践之H5架构布局篇

  1. 若比邻  / 回复

    你好,请问B区可滚动,你的滚动是怎么实现的呢

若比邻 进行回复 取消回复修改评论取消编辑

允许使用的标签 - 您可以在评论中使用如下的 HTML 标签以及属性。

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 :wink:  :-|  :-x  :twisted:  :)  8-O  :(  :roll:  :-P  :oops:  :-o  :mrgreen:  :lol:  :idea:  :-D  :evil:  :cry:  8-)  :arrow:  :-?  :?:  :!: