H5响应式页面制作-创新互联

本篇内容介绍了“H5响应式页面制作”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

H5响应式页面制作

1.全屏式的页面非常不适合响应式布局：

由于缺乏经验,当初选择用全屏滚动的响应式布局写博客,实践中发现由于ipad以及手机端的横屏竖屏模式的存在,而全屏模式又使每一帧成为一屏幕,这样对宽度与高度有着严格的比例要求,在如今手机款式五花八门的形态下,这种一帧要把所有内容全部展示出来的,可能只适合信息量比较少的页面吧....

2.响应式css方面注意的问题：

在@media screen and (max-width||min-width)样式区分截点的格式必须严格遵守,任何一个空格问题都会造成显示错误.

将越小的设备css存越下面,不然会给你带来麻烦.并且响应式页面最小字体为12px.

将谷歌浏览器的控制台放置在页面右边显示,这样大大提高响应式布局css的书写效率.

rem单位好的换算比例为625%,62.5%的换算会有误差,特别是在pc端.

在高度范围下有时候用px去写死是不错的选择

3.js网页部分：

对于5张网页展示图左右切换,由于上次bilibili经验,老牛第一时间就想到了用insertAfter函数去控制图的定位是好的选择,事先把对应div容器用css样式写好,那么在左右切换图层的时候只要把对于的第一张图或是最后一张图的节点位置进行调整,配合上transition属性,这样无论是在代码量以及性能上都是好的选择之一,不足的就是兼容问题.这部分的重点在于焦点容器(最中间的)点击是进行连接,左右两张图点击则是移动,老牛思前想后,最后决定事先将所有的连接地址用数组存起来,由于目标层节点的index一直在改变,所以在初始化的时候就预先给每个容器加上其对应的class名+index值(这样在之后无论节点如何变化,这个初始的class名中保留下的index值能与对应的链接挂钩,不过现在让我做的话可能我会选择用data去保存),接下来全局用一个index值来控制焦点位子,每次移动把焦点位子加上用正则匹配class得来的链接地址,而其他的则去掉链接地址.

4.特效部分3d旋转轮播：

如果光光为了实现一个3d旋转不算什么难事,但是由于手机端的存在,3d旋转在pc端竖直切割,而手机端将会横向切割,并且所有的宽长度参数由于响应式的介入将都成为不确定因素,几乎所有的值都是未知数,所以这部分的计算算是烧了我不少的脑细胞

值得注意的是,由于所有长宽不能写死都需要计算而得,js在运算过程中小数点的误差让我吃尽苦头...不过要是现在我可能会选择用flex盒模型属性去做!

“H5响应式页面制作”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！