先寫點題外話吧，算是對最近經歷的一個總結。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也使用%進行設置。
插入部分做的效果。
