html5頁面佈局總結

先寫點題外話吧，算是對最近經歷的一個總結。2017年，貌似是個多事之秋啊，工做中遇到些不順，原本是很美好的願景，但是如今貌似破滅了，抱着「山重水複疑無路，柳暗花明又一村」的希冀，目前可能也但願渺茫了，沒事，工做的事情總能解決的，仍是有自身優點的，我相信本身，OK，給本身打氣的話就寫到這吧。

之前作移動端webapp開發，屏幕比較小，手機都是一個版本一個版本的固定產品，界面佈局隨便布布，修修改改也就OK了。後來接觸PC大屏幕開發，界面元素頓時增長不少，不注重佈局就會很慌亂和被動，其實想好好總結佈局方面已經很長時間了，但老是沒有一個很好的去總結一下，在加之以前的項目對自適應要求也不是很高，最近作了一個界面，界面元素各類不規則佈局，而且還有動畫，網聯網產品還要求可以適應各類屏幕，各類瀏覽器版本，以前作項目最討厭IE瀏覽器，以爲它老是那麼個性，各類不兼容，作這個產品居然發現了IE瀏覽器的優勢，IE瀏覽器版本少，方便瀏覽器各類版本的兼容性測試，對於不支持的h5屬性，有各路大神開發的各類查件，這些插件能夠解決IE低版本中的h5特性的不支持問題。

言歸正轉，下面開始總結h5界面佈局問題。

1. 首先，拿到一個界面UI設計，須要先對界面進行分塊，分紅幾部分開發。h5有個特性，就是語義化佈局，個人佈局中也使用到了，可能受之前作firefox os項目的影響，這個項目對h5的語義化仍是使用聽充分的，這種語義化使用有的好處我就不說了(結構明瞭)，可是，這種佈局在IE9如下，IE8 IE7中，就不怎麼好了，它們不認這些標籤，在這些版本中就深深的體會了一把什麼是div+css佈局，這種佈局就不會帶來標籤不識別的問題了。

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

3.同一行的元素塊，若是分紅幾個部分，那麼最外層元素使用relative佈局，裏面的使用position：relative；display：inline-block；width：20%的比例式佈局（這裏也能夠考慮使用flex佈局），經過left。top來調整子元素塊的位置，在不一樣分辨率時，調整left，top實現自適應。若是分塊的元素裏面還有子元素，接着進行分塊，而且元素寬度使用%來定義。

4.關於自適應，不一樣尺寸的顯示器，分辨率不一樣，找出不一樣分辨率下位置變化的元素，根據@media screen進行位置的微調，其實須要微調的元素，不少是top爲rem爲單位的元素，left爲百分比的，在每種分辨率下位置左偏移位置不變，爲了作好自適應，佈局界面時讓儘量少的元素相對於界面的位置不穩定。在作自適應的時候，注意各類分辨率的寫法，若是用到了max-width，那麼順序應該重大往小的寫，這樣界面就能使用到最合適的尺寸。

5.自適應的調試經過調整分辨率實現，作爲互聯網產品，瀏覽器兼容性的測試很重要，這時候IE就頗有優點，IE11瀏覽器，有IE5 IE7 IE8 IE9的模式，能夠直接測試，還有IE tester工具。可是chrome和firefox就慘了，目前只有在線工具，收費的，免費也是有限的，而且國外網站，國內哪一個慢啊。 Spoon Browser Sandbox總得來講，這個工具還能夠，經過安裝插件，插件模擬器容許安裝各類版本瀏覽器，進行測試，這裏有個坑，就是他的插件在windows7上能夠安裝使用，在windows10上安裝不了。

BrowserShots這個工具須要你能把你的網頁發佈到公網上，在遠端服務器上運行了，發送截圖給你，可是天天發佈的截圖數量有限，而且只能免費一個月。

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

在說個測試中遇到的坑。firefox瀏覽器21.0版本，對絕對定位的元素，box-align:end和一般的使用方式有差別，解決方法是在本來的div結構中，在添加一層div，使用relative定位，再使用這個box-align:end屬性，可是父級div的高度須要進行調整，總之，這個版本很不一樣，根據實際狀況進行處理吧。

6.說說h5的canvas和css的animation，深深的體會了一把動畫，若是是幾個元素的聯動，仍是乖乖使用div和 css的linear的animation吧，若是是線性的動畫，使用canvas，其實canvas就是在一個容器上，調用接口定時的去重繪，canvas中還不支持skew屬性，無法實現形變。animation中的

transform-origin: 50% 50%
我本來覺得只是在0%的時候設置就所有生效，若是動畫位置變換了，不在是默認的中心點位置，要在每一個進度進行設置。jQuery的animation（）接口，貌似均可以用css的animation實現，animation-fill-mode: forwards;屬性很重要，對於一些動畫效果。若是想要更多動畫效果，好好了解下貝塞爾曲線頗有必要。
若是要實現自適應，canvas的width和height也使用%進行設置。
插入部分作的效果。