Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）
上文回顧 ：Hybird框架UI重構(gòu)之路：四、分而治之
這里講述在開(kāi)發(fā)的過(guò)程中，一些HTML、CSS的關(guān)鍵點(diǎn)。
單頁(yè)模式的頁(yè)面結(jié)構(gòu)在單頁(yè)模式中，弱化HTML的概念，把HTML當(dāng)成一個(gè)容器，BODY中顯示的主體內(nèi)容才是頁(yè)面，一個(gè)HTML容器中可以存放1個(gè)或者多個(gè)頁(yè)面，每個(gè)頁(yè)面放置于section中。而一個(gè)頁(yè)面（section）中必有主體內(nèi)容（content），也有可能包含頭部?jī)?nèi)容、底部?jī)?nèi)容，甚至一些側(cè)滑菜單等。
所以，以我們通?？吹降囊粋€(gè)移動(dòng)應(yīng)用的界面中包含了頂部Title和主體內(nèi)容的頁(yè)面代碼如下：
<!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" /><!-- 函數(shù)庫(kù) --> <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>首頁(yè)</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>這里可以看到單頁(yè)的基本結(jié)構(gòu)是以Section為單個(gè)頁(yè)面的容器，頁(yè)面中顯示的標(biāo)題導(dǎo)航header和主體內(nèi)容content都位于Section之下，并且各自可以顯示需要的內(nèi)容。
也就是如下圖的一個(gè)結(jié)構(gòu)：
片段頁(yè)面相對(duì)就簡(jiǎn)單很多，如下代碼：
<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>頁(yè)面片段也即是主頁(yè)面里面的section塊，從這里看其他頁(yè)面是很簡(jiǎn)潔的。
viewportviewport這東西不詳細(xì)描述，我只是被整得快瘋了，幾個(gè)屬性width、height、initial-scale、minimum-scale、maximum-scale、user-scalable。
ios : 在ios上很正常，設(shè)啥就是啥。
android : 在android上千奇百怪，簡(jiǎn)直是“茅坑里的石頭”。盡管網(wǎng)上很多的文章對(duì)viewport都有闡述，但所寫(xiě)的描述、公式、示例沒(méi)有一個(gè)能說(shuō)對(duì)（我有用不同手機(jī)測(cè)試過(guò)），都沒(méi)能完全說(shuō)明白，都是對(duì)一點(diǎn)錯(cuò)一點(diǎn)，似對(duì)似錯(cuò)。而公司也沒(méi)有人能好好說(shuō)明它，之后我測(cè)試過(guò)，當(dāng)測(cè)試到第5個(gè)機(jī)型就測(cè)不下去了，都不同各異，沒(méi)有共同的特點(diǎn)，只能暫停下來(lái)（做其他事，測(cè)試事情先延后）。
現(xiàn)在使用的設(shè)置viewport的腳本在已測(cè)試過(guò)的機(jī)型都沒(méi)有問(wèn)題，所以暫不深究了,代碼如下。
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：對(duì)于不理解東西，我不喜歡只一對(duì)一解決，例如某個(gè)機(jī)型的viewport設(shè)置有問(wèn)題，設(shè)置某些屬性就可以了，但可能不知為什么。我是希望能明白本質(zhì)原因，以后可以做到舉一反三，才是我想的。另外，如果有人明白viewport且做過(guò)測(cè)試（這點(diǎn)很重要），能否告訴我你的理解，求交流。
扁平化扁平化不是新的東西，目前很多公司的項(xiàng)目都是漸變的風(fēng)格，主要是體現(xiàn)是在header、footer、button等一些控件。而扁平化也僅僅是將漸變的效果去掉，并沒(méi)有什么特別。
?
圖標(biāo)圖標(biāo)有兩種，一種是圖片圖標(biāo)，一種是字體圖標(biāo)。
我有一篇文章有詳細(xì)介紹：http://www.cnblogs.com/lovesong/p/4115991.html
總結(jié) 我并沒(méi)有寫(xiě)開(kāi)發(fā)的具體內(nèi)容（太多東西，沒(méi)辦法幾篇文章講完，也沒(méi)必要，畢竟思路才是正途），也就不多講，旨在介紹我開(kāi)發(fā)的方式、方法、步奏，以及一點(diǎn)關(guān)鍵的前端問(wèn)題。 本文為原創(chuàng)文章，轉(zhuǎn)載請(qǐng)保留原出處，方便溯源，如有錯(cuò)誤地方，謝謝指正。 本文地址 ：http://www.cnblogs.com/lovesong/p/4297182.html轉(zhuǎn)載于:https://www.cnblogs.com/lovesong/p/4297182.html
總結(jié)
以上是生活随笔為你收集整理的Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： mac mysql客户端工具 知乎_Ma
- 下一篇： 2017年html5行业报告,云适配发布