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

转载于:https://www.cnblogs.com/lovesong/p/4297182.html

Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）相关推荐

Hybrid框架UI重构之路：三、工欲善其事，必先利其器
上文回顾:Hybird框架UI重构之路:二.事出有因工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : ...
Hybrid框架UI重构之路：一、师其长技以自强
这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不 ...
vue ui框架_你为什么要使用前端框架Vue?
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
写一个易于维护使用方便性能可靠的Hybrid框架（一）—— 思路构建
写一个易于维护使用方便性能可靠的Hybrid框架(二)-- 插件化写一个易于维护使用方便性能可靠的Hybrid框架(三)-- 配置插件前言本来上一篇博文写完,我就告诉自己,这是最后一篇,之后不再 ...
58同城iOS客户端Hybrid框架探索
作者:杜艳新,刘文军.58同城iOS高级研发工程师,专注于App Hybrid框架的架构研发,主导了58同城App的Hybird混合研发的系统架构以及研发. 责编:唐小引,欢迎技术投稿.约稿.给文章纠 ...
58 同城 iOS 客户端 Hybrid 框架探索
[CSDN 编者按]58 同城 iOS 客户端的 Hybrid 框架在最初设计和演进的过程中,遇到了许多问题.为此,整个 Hybrid 框架产生了很大的变化.本文作者将遇到的典型问题进行了总结,并重点 ...
【quickhybrid】架构一个Hybrid框架
前言虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念, 经过不断的迭代,演化才逐步稳定明确目标首先明确需要做成一个什么样的框架? 大致就是: 一套API规范(统一An ...
Seata RPC 模块的重构之路
作者 | 张乘辉来源|阿里巴巴云原生公众号 RPC 模块是我最初研究 Seata 源码开始的地方,因此我对 Seata 的 RPC 模块有过一些深刻研究,在我研究了一番后,发现 RPC 模块中的代码 ...
（转）微服务框架落地实践之路
http://www.primeton.com/read.php?id=2276&his=1 一.微服务架构产生的背景近十年中,互联网给我们生活带来了翻天覆地的变化,消费者的生活方式日益数字 ...

Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）

Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）相关推荐

最新文章

热门文章