html5页面布局总结

时间:2022-11-18 19:50:46

先写点题外话吧,算是对最近经历的一个总结。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页面布局总结