從前我寫過一篇《翻頁H5全分辨率適配最佳實踐》易核，那篇對于不同屏幕不同分辨率下的適配講的太簡單匈织，其實是我想的太簡單。想要盡可能完美的適配，其中的花花還是有很多的缀匕。
工作臺分辨率
從前我講了纳决，工作臺以320x520作為標準分辨率，然后讓瀏覽器根據(jù)initial-scale來放大顯示乡小。
div層級關(guān)系
我認為的比較理想的層級關(guān)系是：
div.ancestor>div.page>div.editarea>div.element
也就是說：
1阔加、div.ancestor是祖先層，每個人有自己的寫法满钟，在本文里不說胜榔，但是寬高必須是視口寬高，也就是百分之百湃番。
2夭织、page層，負責(zé)設(shè)背景圖吠撮，它的寬高都始終是百分之百尊惰，也就是視口寬高。
3泥兰、editarea層弄屡，這個層作為一個調(diào)整層最重要，下文有詳細說明鞋诗。
4膀捷、element層，是具體浮動元素削彬，也就是內(nèi)容全庸。
內(nèi)容布局
今天主要講講內(nèi)容布局。由于我們要適配高視口和矮視口吃警，而320x520是最高的視口糕篇，所以，設(shè)計師做設(shè)計酌心，內(nèi)容注定不應(yīng)該充滿整個畫面拌消，也就是說，內(nèi)容不能從頂線一直鋪到底線安券。既然要有一定的空隙墩崩，那么就涉及到空隙留在什么地方。具體分成四種情況：（1）內(nèi)容居中（2）內(nèi)容居上（3）內(nèi)容居下（4）內(nèi)容占滿侯勉。
這就相當于word里面的：（1）居中（2）左對齊（3）右對齊（4）兩端對齊鹦筹。可以對照想象一下址貌。
下面分別講述铐拐。
主體內(nèi)容集中在中部徘键，上下留白
這種布局是最主流的布局，設(shè)計師要求程序員：
1遍蟋、浮動元素集中在中部吹害，留天留地。
2虚青、背景圖的主體元素也在中部它呀，留天留地。
應(yīng)對設(shè)計師的這種要求棒厘，程序員應(yīng)該做的是：
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值引几，假設(shè)editarea的高度是視口100%，那么非惩焯靠近底部的元素伟桅，在視口中就會被裁剪。這當然不是我們想要的叽掘。因此楣铁，我搞一個向上的偏移，這就讓所有浮動內(nèi)容都在手機屏幕中顯示了出來。
3、浮動元素：原則上都使用top: xxxpx锥惋，不使用bottom: xxxpx啊奄，除非你確定某個浮動元素必須下對齊莫辨，而且它在任何視口都不影響其他元素髓废，也不影響背景震缭。另外嘶窄，浮動元素絕對不允許吸頂或者吸底哭廉，因為這樣百分百會被裁剪脊僚。
主體內(nèi)容在上方，從上向下鋪內(nèi)容
設(shè)計師要求程序員：
1遵绰、浮動內(nèi)容辽幌，必須從頂部開始往下排列，到屏幕的底部的時候沒有主體內(nèi)容椿访。比較高的視口下乌企，底部會看到一些無內(nèi)容區(qū)，比較矮的視口下成玫，底部被裁剪加酵。
2、背景圖哭当，優(yōu)先顯示頂部內(nèi)容猪腕，背景圖的底部不設(shè)計實質(zhì)內(nèi)容，可以被窗口裁剪钦勘。
應(yīng)對設(shè)計師的這種要求陋葡，程序員應(yīng)該做的是：
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)容集中在下部霸奕，比如溜宽，設(shè)計師做了一個舞臺，這個舞臺是重點质帅，不允許被裁剪适揉，如果裁剪的話留攒，站在舞臺上的人就等于懸空了，而且嫉嘀，這個舞臺決不允許被裁剪炼邀，哪怕是裁剪一部分都會讓人看不懂這是個什么東西。這種情況就是所謂主要內(nèi)容在下部剪侮。
此時設(shè)計師要求程序員：
1拭宁、浮動內(nèi)容，必須從底部開始往上排列瓣俯，到屏幕的頂部的時候沒有主體內(nèi)容杰标。比較高的視口下，頂部會看到一些無內(nèi)容的天花板彩匕，比較矮的視口下腔剂，天花板允許被裁剪。
2驼仪、背景圖掸犬，優(yōu)先顯示底部內(nèi)容，背景圖的頂部不設(shè)計實質(zhì)內(nèi)容绪爸，可以被裁剪湾碎。
應(yīng)對設(shè)計師的這種要求，程序員應(yīng)該做的是：
1毡泻、背景圖：
background-position: 50% bottom;
background-size: cover;
2胜茧、editarea樣式跟上面一樣：
.editarea{
position: relative;
width: 100%:
height: 100%;
}
3、浮動元素：原則上都使用bottom: xxxpx仇味，不得使用top: xxxpx，除非你確定某個浮動元素必須在頂部雹顺，而且確認它在任何視口都不影響其他元素丹墨，也不影響背景。
主體內(nèi)容占滿全屏
這個就有點意思了嬉愧，也就是說：
設(shè)計師要求程序員：
1贩挣、屏幕頂部的內(nèi)容必須全露，而且盡量吸頂没酣。
2王财、屏幕底部的內(nèi)容也必須全露，而且盡量吸底裕便。
3绒净、屏幕中央的內(nèi)容占據(jù)的面積可大可小，比較疏松偿衰，均勻分布挂疆。
這種“主體內(nèi)容占滿全屏”的例子有：
1改览、彈幕，假設(shè)你設(shè)定彈幕有10行缤言，要求鋪滿全屏宝当，那么就是從頂部開始均勻往下鋪10行。彈幕當然不允許被裁剪胆萧，而且必須均勻分布庆揩。高視口下，行間距就大一點跌穗，低視口下订晌，行間距就小一點。
2瞻离、局部滾動列表腾仅，這個列表盡管是局部滾動的，但是我們當然希望它盡量占滿全屏套利。
應(yīng)對設(shè)計師的這種要求推励，程序員應(yīng)該做的是：
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%;
}
