從前我寫過一篇《翻頁H5全分辨率適配最佳實踐》，那篇對于不同屏幕不同分辨率下的適配講的太簡單，其實是我想的太簡單。想要盡可能完美的適配，其中的花花還是有很多的。
工作臺分辨率
從前我講了，工作臺以320x520作為標準分辨率，然后讓瀏覽器根據(jù)initial-scale來放大顯示。
div層級關系
我認為的比較理想的層級關系是：
div.ancestor>div.page>div.editarea>div.element
也就是說：
1、div.ancestor是祖先層，每個人有自己的寫法，在本文里不說，但是寬高必須是視口寬高，也就是百分之百。
2、page層，負責設背景圖，它的寬高都始終是百分之百，也就是視口寬高。
3、editarea層，這個層作為一個調(diào)整層最重要，下文有詳細說明。
4、element層，是具體浮動元素，也就是內(nèi)容。
內(nèi)容布局
今天主要講講內(nèi)容布局。由于我們要適配高視口和矮視口，而320x520是最高的視口，所以，設計師做設計，內(nèi)容注定不應該充滿整個畫面，也就是說，內(nèi)容不能從頂線一直鋪到底線。既然要有一定的空隙，那么就涉及到空隙留在什么地方。具體分成四種情況：（1）內(nèi)容居中（2）內(nèi)容居上（3）內(nèi)容居下（4）內(nèi)容占滿。
這就相當于word里面的：（1）居中（2）左對齊（3）右對齊（4）兩端對齊。可以對照想象一下。
下面分別講述。
主體內(nèi)容集中在中部，上下留白
這種布局是最主流的布局，設計師要求程序員：
1、浮動元素集中在中部，留天留地。
2、背景圖的主體元素也在中部，留天留地。
應對設計師的這種要求，程序員應該做的是：
1、背景圖：
background-position: 50% top;
background-size: cover;
2、editarea樣式：
.editarea{
position: relative;
width: 100%;
top: calc((100% - 520px) / 2);
height: 520px;
}
這里注意top: calc((100% - 520px) / 2);的妙用，簡單說，我們希望editarea跟祖先元素中心點重合，也就是居中對齊，而且希望editarea的高度大于視口，是固定值520px。如下圖所示：
為什么要這么搞呢？為什么editarea的高度不能是視口100%呢？
因為這涉及到浮動元素的定位問題。我們可以用top、left、bottom、right定位一個元素，但并不存在一種叫center的屬性，也就是說我們沒辦法簡單的以容器中心點為坐標來定位元素，只能從四個邊開始丈量。
當我們以320x520為畫布，擺放好了所有的浮動元素，每個浮動元素都有自己的top值，假設editarea的高度是視口100%，那么非常靠近底部的元素，在視口中就會被裁剪。這當然不是我們想要的。因此，我搞一個向上的偏移，這就讓所有浮動內(nèi)容都在手機屏幕中顯示了出來。
3、浮動元素：原則上都使用top: xxxpx，不使用bottom: xxxpx，除非你確定某個浮動元素必須下對齊，而且它在任何視口都不影響其他元素，也不影響背景。另外，浮動元素絕對不允許吸頂或者吸底，因為這樣百分百會被裁剪。
主體內(nèi)容在上方，從上向下鋪內(nèi)容
設計師要求程序員：
1、浮動內(nèi)容，必須從頂部開始往下排列，到屏幕的底部的時候沒有主體內(nèi)容。比較高的視口下，底部會看到一些無內(nèi)容區(qū)，比較矮的視口下，底部被裁剪。
2、背景圖，優(yōu)先顯示頂部內(nèi)容，背景圖的底部不設計實質(zhì)內(nèi)容，可以被窗口裁剪。
應對設計師的這種要求，程序員應該做的是：
1、背景圖：
background-position: 50% top;
background-size: cover;
2、editarea樣式?jīng)]啥特別的：
.editarea{
position: relative;
width: 100%:
height: 100%;
}
簡單解釋這里為啥不用top修正位置了呢？因為你的內(nèi)容要求從頂部往下排，當然就不用修正位置了。
3、浮動元素：原則上都使用top: xxxpx，不使用bottom: xxxpx，除非你確定某個浮動元素必須下對齊，而且它在任何視口都不影響其他元素，也不影響背景。
主體內(nèi)容全部在下方，從下往上鋪內(nèi)容
這個跟上面相反，內(nèi)容集中在下部，比如，設計師做了一個舞臺，這個舞臺是重點，不允許被裁剪，如果裁剪的話，站在舞臺上的人就等于懸空了，而且，這個舞臺決不允許被裁剪，哪怕是裁剪一部分都會讓人看不懂這是個什么東西。這種情況就是所謂主要內(nèi)容在下部。
此時設計師要求程序員：
1、浮動內(nèi)容，必須從底部開始往上排列，到屏幕的頂部的時候沒有主體內(nèi)容。比較高的視口下，頂部會看到一些無內(nèi)容的天花板，比較矮的視口下，天花板允許被裁剪。
2、背景圖，優(yōu)先顯示底部內(nèi)容，背景圖的頂部不設計實質(zhì)內(nèi)容，可以被裁剪。
應對設計師的這種要求，程序員應該做的是：
1、背景圖：
background-position: 50% bottom;
background-size: cover;
2、editarea樣式跟上面一樣：
.editarea{
position: relative;
width: 100%:
height: 100%;
}
3、浮動元素：原則上都使用bottom: xxxpx，不得使用top: xxxpx，除非你確定某個浮動元素必須在頂部，而且確認它在任何視口都不影響其他元素，也不影響背景。
主體內(nèi)容占滿全屏
這個就有點意思了，也就是說：
設計師要求程序員：
1、屏幕頂部的內(nèi)容必須全露，而且盡量吸頂。
2、屏幕底部的內(nèi)容也必須全露，而且盡量吸底。
3、屏幕中央的內(nèi)容占據(jù)的面積可大可小，比較疏松，均勻分布。
這種“主體內(nèi)容占滿全屏”的例子有：
1、彈幕，假設你設定彈幕有10行，要求鋪滿全屏，那么就是從頂部開始均勻往下鋪10行。彈幕當然不允許被裁剪，而且必須均勻分布。高視口下，行間距就大一點，低視口下，行間距就小一點。
2、局部滾動列表，這個列表盡管是局部滾動的，但是我們當然希望它盡量占滿全屏。
應對設計師的這種要求，程序員應該做的是：
1、背景圖：
background-position: 50% 50%;
background-size: cover;
2、editarea樣式跟上面一樣：
.editarea{
position: relative;
width: 100%:
height: 100%;
}
3、浮動元素：如果要均勻分布，原則上都使用top: xxx%，注意，用百分比，而不用px值。
類總結(jié)
page層：
.bpt {
background-position: 50% top;
}
.bpb {
background-position: 50% bottom;
}
page層默認是background-position: 50% 50%;，根據(jù)需要再追加.bpt或.bpb。
editarea層：
.editarea {
position: relative;
margin: 0 16px;
width: 288px;
height: 520px;
top: calc((100% - 520px) / 2);
tap-highlight-color: transparent;
overflow: hidden;
}
.editarea-w100 {
margin: 0;
width: 320px;
}
.editarea-h100 {
height: 100%;
}
