這裡講述在開發的過程中，一些html、css的關鍵點。
單頁模式的頁面結構
在單頁模式中，弱化html的概念，把html當成一個容器，body中顯示的主體内容才是頁面，一個html容器中可以存放1個或者多個頁面，每個頁面放置于section中。而一個頁面（section）中必有主體内容（content），也有可能包含頭部内容、底部内容，甚至一些側滑菜單等。
是以，以我們通常看到的一個移動應用的界面中包含了頂部title和主體内容的頁面代碼如下：
這裡可以看到單頁的基本結構是以section為單個頁面的容器，頁面中顯示的标題導航header和主體内容content都位于section之下，并且各自可以顯示需要的内容。
也就是如下圖的一個結構：
片段頁面相對就簡單很多，如下代碼：
頁面片段也即是首頁面裡面的section塊，從這裡看其他頁面是很簡潔的。
viewport
viewport這東西不較長的描述，我隻是被整得快瘋了，幾個屬性width、height、initial-scale、minimum-scale、maximum-scale、user-scalable。
ios : 在ios上很正常，設啥就是啥。
android : 在android上千奇百怪，簡直是“茅坑裡的石頭”。盡管網上很多的文章對viewport都有闡述，但所寫的描述、公式、示例沒有一個能說對（我有用不同手機測試過），都沒能完全說明白，都是對一點錯一點，似對似錯。而公司也沒有人能好好說明它，之後我測試過，當測試到第5個機型就測不下去了，都不同各異，沒有共同的特點，隻能暫停下來（做其他事，測試事情先延後）。
現在使用的設定viewport的腳本在已測試過的機型都沒有問題，是以暫不深究了,代碼如下。
ps：對于不了解東西，我不喜歡隻一對一解決，例如某個機型的viewport設定有問題，設定某些屬性就可以了，但可能不知為什麼。我是希望能明白本質原因，以後可以做到舉一反三，才是我想的。另外，如果有人明白viewport且做過測試（這點很重要），能否告訴我你的了解，求交流。
扁平化
扁平化不是新的東西，目前很多公司的項目都是漸變的風格，主要是展現是在header、footer、button等一些控件。而扁平化也僅僅是将漸變的效果去掉，并沒有什麼特别。
圖示
圖示有兩種，一種是圖檔圖示，一種是字型圖示。
總結
我并沒有寫開發的具體内容（太多東西，沒辦法幾篇文章講完，也沒必要，畢竟思路才是正途），也就不多講，旨在介紹我開發的方式、方法、步奏，以及一點關鍵的前端問題。
本文為原創文章，轉載請保留原出處，友善溯源，如有錯誤地方，謝謝指正。
轉載：http://www.cnblogs.com/lovesong/p/4297182.html