Hybrid框架UI重构之路:五、前端那点事儿(HTML、CSS)-阿里云开发者社区

开发者社区> 开发与运维> 正文

Hybrid框架UI重构之路:五、前端那点事儿(HTML、CSS)

简介:

上文回顾 :Hybird框架UI重构之路:四、分而治之

这里讲述在开发的过程中,一些HTML、CSS的关键点。

单页模式的页面结构

在单页模式中,弱化HTML的概念,把HTML当成一个容器,BODY中显示的主体内容才是页面,一个HTML容器中可以存放1个或者多个页面,每个页面放置于section中。而一个页面(section)中必有主体内容(content),也有可能包含头部内容、底部内容,甚至一些侧滑菜单等。

所以,以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如下:

复制代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=480,user-scalable=no" />

<link rel="stylesheet" href="css/bingotouch.css" />
<link rel="stylesheet" href="css/app.css" />

<!-- 函数库 -->
<script src="js/cordova.js"></script>
<script src="js/zepto.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/baiduTemplate.js"></script>
<script src="js/bingotouch.js"></script>
<script src="js/app/app.js"></script>

<title>BingoTouch</title>
</head>
<body>
    <div id="section_container">
      <section id="index_section" class="active">
          <div class="header" data-fixed="top">
              <div class="title row-box">
                 <div class="box-left">
                 </div>
                 <div class="span1">
                     <h1>首页</h1>
                 </div>
                 <div class="box-right">
                 </div>
             </div>
          </div>
          <div class="content">
             <h1>欢迎使用BingoTouch</h1>
          </div>
          <div class="footer" data-fixed="bottom">
          </div>
      </section>
    </div>
</body>
</html>
复制代码

这里可以看到单页的基本结构是以Section为单个页面的容器,页面中显示的标题导航header和主体内容content都位于Section之下,并且各自可以显示需要的内容。

也就是如下图的一个结构:

片段页面相对就简单很多,如下代码:

复制代码
<section id="demo_section">
    <div class="header" data-fixed="top">
      <div class="title row-box">
              <div class="box-left">
          </div>
          <div class="span1">
              <h1>Demo</h1>
          </div>
          <div class="box-right">
          </div>
        </div>
    </div>
    <div class="content">
      <h1>欢迎使用BingoTouch</h1>
    </div>
    <div class="footer" data-fixed="bottom">
    </div>
</section>
复制代码

页面片段也即是主页面里面的section块,从这里看其他页面是很简洁的。

 
viewport

viewport这东西不详细描述,我只是被整得快疯了,几个属性width、height、initial-scale、minimum-scale、maximum-scale、user-scalable。

ios : 在ios上很正常,设啥就是啥。

android : 在android上千奇百怪,简直是“茅坑里的石头”。尽管网上很多的文章对viewport都有阐述,但所写的描述、公式、示例没有一个能说对(我有用不同手机测试过),都没能完全说明白,都是对一点错一点,似对似错。而公司也没有人能好好说明它,之后我测试过,当测试到第5个机型就测不下去了,都不同各异,没有共同的特点,只能暂停下来(做其他事,测试事情先延后)。

现在使用的设置viewport的脚本在已测试过的机型都没有问题,所以暂不深究了,代码如下。

复制代码
var viewport = "";
var userAgent = navigator.userAgent.toLowerCase();

if (/android (\d+\.\d+)/.test(userAgent)) {
    viewport ="width=device-width,initial-scale=1,user-scalable=no,target-densitydpi =240";
} else {
    if(userAgent.match(/ipad/i)){
        viewport = "width=640,user-scalable=no";
    }else if(userAgent.match(/iphone os/i) == "iphone os"){
         viewport = "width=480,user-scalable=no";
    }
}
//add view
if ($("meta[name='viewport']").length > 0) {
    $("meta[name='viewport']").attr("content", viewport);
} else {
    var element = document.createElement('meta');
    element.name = "viewport";
    element.content = viewport;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(element);
}
复制代码

PS:对于不理解东西,我不喜欢只一对一解决,例如某个机型的viewport设置有问题,设置某些属性就可以了,但可能不知为什么。我是希望能明白本质原因,以后可以做到举一反三,才是我想的。另外,如果有人明白viewport且做过测试(这点很重要),能否告诉我你的理解,求交流。

 
扁平化

扁平化不是新的东西,目前很多公司的项目都是渐变的风格,主要是体现是在header、footer、button等一些控件。而扁平化也仅仅是将渐变的效果去掉,并没有什么特别。

 

图标

图标有两种,一种是图片图标,一种是字体图标。

我有一篇文章有详细介绍:http://www.cnblogs.com/lovesong/p/4115991.html

 
总结
我并没有写开发的具体内容(太多东西,没办法几篇文章讲完,也没必要,毕竟思路才是正途),也就不多讲,旨在介绍我开发的方式、方法、步奏,以及一点关键的前端问题。
 
本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
 
 
 
本文转自 海角在眼前 博客园博客,原文链接: http://www.cnblogs.com/lovesong/p/4297182.html  ,如需转载请自行联系原作者
http://www.cnblogs.com/lovesong/p/4297182.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章