上文回顾 ：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

 
总结
我并没有写开发的具体内容（太多东西，没办法几篇文章讲完，也没必要，毕竟思路才是正途），也就不多讲，旨在介绍我开发的方式、方法、步奏，以及一点关键的前端问题。
 
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

 
 
 

Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）的更多相关文章

  1. Hybrid框架UI重构之路：六、前端那点事儿（Javascript）

    上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤 对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http:// ...

  2. Hybrid框架UI重构之路：四、分而治之

    上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js. ...

  3. Hybrid框架UI重构之路：三、工欲善其事，必先利其器

    上文回顾:Hybird框架UI重构之路:二.事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : ...

  4. Hybrid框架UI重构之路：二、事出有因

    上文回顾:Hybird框架UI重构之路:一.师其长技以自强 一切的重构都是有原因的,或许为了更快速度.更好体验.更快捷开发等,于是就有了自己的开发目标,简单看看未重构前UI("中国移动式&q ...

  5. Hybrid框架UI重构之路：一、师其长技以自强

    这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不 ...

  6. 移动端前端框架UI库

    移动端前端框架UI库(Frozen UI.WeUI.SUI Mobile) Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github. ...

  7. quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

  8. 【quickhybrid】架构一个Hybrid框架

    前言 虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念, 经过不断的迭代,演化才逐步稳定 明确目标 首先明确需要做成一个什么样的框架? 大致就是: 一套API规范(统一An ...

  9. 【quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

随机推荐

  1. js连续指定两次或者多次的click事件（解决办法）

    setTimeout (表达式,延时时间)setTimeout(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout  在执行时,是在载入后延迟指定时间后, ...

  2. Yii2的深入学习--yii\base\Event 类

    根据之前一篇文章,我们知道 Yii2 的事件分两类,一是类级别的事件,二是实例级别的事件.类级别的事件是基于 yii\base\Event 实现,实例级别的事件是基于 yii\base\Compone ...

  3. Spring AOP AspectJ Pointcut Expressions With Examples--转

    原文地址:http://howtodoinjava.com/spring/spring-aop/writing-spring-aop-aspectj-pointcut-expressions-with ...

  4. iOS-地图报错超出了经纬度范围Invalid Region

    做地图定位的时候,使用一下代码 // 经纬度 CLLocationDegrees latitude = [storeDict[@"lat"] doubleValue]; CLLoc ...

  5. 20个设计精致的用户界面 PSD 源文件免费下载

    今天这篇文章收集了20个新鲜出炉的用户界面 PSD 源文件素材,你可以免费下载使用.这些免费素材不仅能帮助设计师们节省大量的时间,而且能有很好的效果.感谢那些很有才华的设计师分享它们的劳动成果,让更多 ...

  6. SQL Server安全（5/11）：架构与安全（Schemas and Security）

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  7. HashSet 与TreeSet和LinkedHashSet的区别

    Set接口      Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false.      Set判断两个对象相同不是使用==运算符,而是根据equals方法.也就 ...

  8. MyEclipse中常用的快捷键大全，快来.....

    在这里分享点常用的快捷键,希望对你有帮助! Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1. [ALT+/] ...

  9. 利用Travis CI 让你的github项目持续构建

    Travis CI 是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,简洁清新独树一帜.目前大多数的github项目都已经移入到Travis CI的构建队列 ...

  10. .NET Core 调用WCF 服务

    .NET Core 和ASP.NET Core 已经可以调用WCF 服务. 环境要求: VS2015 Update 2 +VS2015 Tooling + .NET Core SDK 下载地址: ht ...