先写点题外话吧，算是对最近经历的一个总结。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也使用%进行设置。
插入部分做的效果。

html5页面布局总结