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也使用%进行设置。
插入部分作的效果。