推薦課程：HTML教程。

首先，拿到一個界面UI設計，需要先對界面進行分塊，分成幾部分開發(fā)。h5有個特性，就是語義化布局，我的布局中也使用到了，可能受以前做firefox os項目的影響，這個項目對h5的語義化還是使用聽充分的，這種語義化使用有的好處我就不說了(結(jié)構(gòu)明了)，但是，這種布局在IE9以下，IE8 IE7中，就不怎么好了，它們不認這些標簽，在這些版本中就深深的體會了一把什么是div+css布局，這種布局就不會帶來標簽不識別的問題了。

2.塊分好了，如果要兼容IE地版本，選擇div+css布局，開始具體布局。在布局中，position屬性就顯得很重要，div元素位置如果不需要進行調(diào)整，按照盒模型順排下來可以，就不用進行設置，取默認值static，如果要進行偏移，設置為relative，元素不會脫離文檔流。在一個元素上，還有其他的元素也在它的占位上的某個位置，那么外層的div設置為relative，它的位置上的元素就用absolute來定位，并且給top：0；left:0來進行偏移； 這里，元素進行偏移時，使用怎么的單位很重要，對于相對于界面，要在界面某個位置的元素，界面寬度width，left和top使用%來偏移，這樣，在任何分辨率的屏幕上，元素都在相對于界面相同的位置上，使得元素在任何顯示器上都能正常顯示。但是，如果對于一個元素快，里面有其他的元素組成，他們組成了一個一體的布局，并且位置不規(guī)整，那么內(nèi)部的元素請使用absolute進行布局，并且top和left請使用rem進行布局，這樣在任何分辨率下，元素塊雖然顯示大小不同，但是元素塊的相對位置不變，元素塊一直是一個整體。另外，如果一個元素是absolute元素，它里面還有元素，請使用relative，并且使用rem為單位，這樣，這個元素 就是一體的，是個整體，在任何分辨率下都是那樣的布局整體。

3.同一行的元素塊，如果分成幾個部分，那么最外層元素使用relative布局，里面的使用position：relative；display：inline-block；width：20%的比例式布局（這里也可以考慮使用flex布局），通過left。top來調(diào)整子元素塊的位置，在不同分辨率時，調(diào)整left，top實現(xiàn)自適應。如果分塊的元素里面還有子元素，接著進行分塊，并且元素寬度使用%來定義。

4.關(guān)于自適應，不同尺寸的顯示器，分辨率不同，找出不同分辨率下位置變化的元素，根據(jù)@media screen進行位置的微調(diào)，其實需要微調(diào)的元素，很多是top為rem為單位的元素，left為百分比的，在每種分辨率下位置左偏移位置不變，為了做好自適應，布局界面時讓盡可能少的元素相對于界面的位置不穩(wěn)定。在做自適應的時候，注意各種分辨率的寫法，如果用到了max-width，那么順序應該重大往小的寫，這樣界面就能使用到最合適的尺寸。

5.自適應的調(diào)試通過調(diào)整分辨率實現(xiàn)，做為互聯(lián)網(wǎng)產(chǎn)品，瀏覽器兼容性的測試很重要，這時候IE就很有優(yōu)勢，IE11瀏覽器，有IE5 IE7 IE8 IE9的模式，可以直接測試，還有IE tester工具。但是chrome和firefox就慘了，目前只有在線工具，收費的，免費也是有限的，并且國外網(wǎng)站，國內(nèi)哪個慢啊。 Spoon Browser Sandbox總得來說，這個工具還可以，通過安裝插件，插件模擬器允許安裝各種版本瀏覽器，進行測試，這里有個坑，就是他的插件在windows7上可以安裝使用，在windows10上安裝不了。

BrowserShots這個工具需要你能把你的網(wǎng)頁發(fā)布到公網(wǎng)上，在遠端服務器上運行了，發(fā)送截圖給你，但是每天發(fā)布的截圖數(shù)量有限，并且只能免費一個月。

IE NetRenderer這個是對IE瀏覽器進行測試，有了IE11，意義不是特別大，有的瀏覽器還是測試不出來。

在說個測試中遇到的坑。firefox瀏覽器21.0版本，對絕對定位的元素，box-align:end和通常的使用方式有差異，解決方法是在原本的div結(jié)構(gòu)中，在添加一層div，使用relative定位，再使用這個box-align:end屬性，但是父級div的高度需要進行調(diào)整，總之，這個版本很不同，根據(jù)實際情況進行處理吧。

6.說說h5的canvas和css的animation，深深的體會了一把動畫，如果是幾個元素的聯(lián)動，還是乖乖使用div和 css的linear的animation吧，如果是線性的動畫，使用canvas，其實canvas就是在一個容器上，調(diào)用接口定時的去重繪，canvas中還不支持skew屬性，沒法實現(xiàn)形變。animation中的transform-origin: 50% 50%

我原本以為只是在0%的時候設置就全部生效，如果動畫位置變換了，不在是默認的中心點位置，要在每個進度進行設置。jQuery的animation（）接口，貌似都可以用css的animation實現(xiàn)，animation-fill-mode: forwards;屬性很重要，對于一些動畫效果。如果想要更多動畫效果，好好了解下貝塞爾曲線很有必要。

如果要實現(xiàn)自適應，canvas的width和height也使用%進行設置。

插入部分做的效果。

以上就是html5頁面布局怎么做的詳細內(nèi)容，更多請關(guān)注 其它相關(guān)文章！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。