一種單頁應用的頁面結構
面向移動端的單頁應用（single page web application），從頁面**上來說，會使用較一般網頁不同的結構。單頁應用並不是說應用只需要乙個檢視，而是說可以將組成應用的多個檢視集合在乙個網頁內呈現，且在檢視之間能夠自由切換（平滑的動畫形式居多）。
我製作單頁應用使用的是一種常見方法，像下面這樣：
css code複製內容到剪貼簿
可以看出，其原理是檢視都由絕對定位的覆蓋螢幕大小（可見視口）的元素構成，在某一時間點，只會顯示乙個檢視。
固定頁尾的問題
那麼，固定頁尾是乙個什麼問題呢？請看下圖：
先說說什麼是固定頁尾吧。上圖右可以看到，當頁面內容較多，超出一屏的高度時，頁尾是「自然地」緊跟在內容後邊，滾動到底部時，才會看到位於最下方的頁尾。同時，上圖左可以看到，當頁面內容較少時，頁尾則直接位於螢幕最下方，剩餘區域則是空白。這就是固定頁尾，它可以算是一種比較理想的「總是在它應該在的位置」的頁尾。
那麼，問題來了。參考上圖左，除了固定頁尾的效果之外，現在還要求當頁面內容較少時，頁面內容（content）可以水平垂直居中於剩餘的空間（container）。在上述單頁應用的頁面結構中，應該如何實現呢？
方法**
水平垂直居中與flexbox
讓我們一步一步來。先完成「水平垂直居中」。由於內容高度不確定，所以這裡適合使用彈性盒模型（flexbox）。
關於彈性盒模型的指南，推薦閱讀a complete guide to flexbox 和dive into flexbox 。
應用flexbox實現水平垂直居中可以先得到這樣的**（由於其他檢視不再需要，這裡只保留乙個檢視）：
css code複製內容到剪貼簿
上面的div.container對應前面圖中的剩餘空間（作為容器），div.content則是需要水平垂直居中的內容。對應的css是：
css code複製內容到剪貼簿
flex-container、justify-content-center、align-items-center都是彈性盒模型的輔助class（熟悉了flexbox就可以很快理解）。使用輔助class是因為彈性盒模型從前到後幾經變化，相容處理需要稍多**。這些輔助class的css是：
css code複製內容到剪貼簿
到此，水平垂直居中就完成了。
實現固定頁尾
現在加入頁尾的部分。這時候html**變成：
css code複製內容到剪貼簿
注意，div.view-page是絕對定位，且定義了height: 100%;，而此時div.container也定義了min-height: 100%;。考慮到要「為頁尾留空間」，結合傳統網頁中的固定頁尾的做法，得到完整的css：
css code複製內容到剪貼簿
以上就是在這種條件下的固定頁尾的實現方法。雖然最後看起來只是這樣一小段**，但我還是思考了相當一段時間加上試驗才得到。其中padding-bottom和負值的margin-bottom的結合應用很關鍵。此外，作為移動端的網頁，要想到使用box-sizing這個配合百分比會非常有用的css3屬性。
其他形式的嘗試？
我也試過使用主軸為垂直方向的flexbox來實現，但可惜經過測試，flex-direction: column;還沒有被現在的主流手機瀏覽器所支援。
傳統網頁的固定頁尾
在WEB環境中使用ThreadLocal注意事項
具體的threadlocal的原理，這裡就不在累贅了，網上很多這樣的文章。主要是講下在web環境中，使用threadlocal要特別主意的問題。threadlocal 其中的乙個用處是 在同乙個執行緒間共享變數，在不同的執行緒間隔離。string val,string corpid 是會維護一組執行...
在 CSS 中使用特徵查詢
本文講的是在 css 中使用特徵查詢，譯文出自 掘金翻譯計畫 譯者 cherry 校對者 leviding h2o 2 supports display grid supports display grid asideborder radius 1emp first letterinitial le...
移動web頁面使用字型的思考
回想2年前剛開始接觸手機專案，接到psd稿後，發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計，於是我寫頁面的時候也定義 font family 為微軟雅黑，後來發到線上後，細心的產品經理發現頁面的字型不是微軟雅黑，要求馬上修改，我就驚呆了，還跟產品爭執一番。後來了解到的手機系統 ios andr...