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塊，從這里看其他頁面是很簡潔的。
viewportviewport這東西不詳細描述，我只是被整得快瘋了，幾個屬性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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mac mysql客户端工具 知乎_Ma
- 下一篇： 浏览器获取正确的scrollTop值