主页/ 电商学院/网站开发/做h5响应式网站这些事情要注意了

做h5响应式网站这些事情要注意了

归类:网站开发
h5页面时是最近比较流行的一种建站方式,但是很多人对于h5页面制作还是有很多疑问,今天佛山网站建设公司优加网络科技小编梳理了h5建站存在的问题,为大家一一来讲解。

用h5做网站是最近比较流行的一种建站方式,但是很多人对于h5页面制作还是有很多疑问,今天优加网络科技小编梳理了h5建站存在的问题,为大家一一来讲解。

佛山网站制作公司

一、切勿使用全屏式页面

全屏式页面有严格的宽高比,但是不管是ipad还是手机都存在横屏竖屏模式,而且现在手机屏幕的分辨率五花八门,在这种情况下,要把每一屏的内容都展示出来,只适合信息量比较少的页面。

二、H5响应式网站css注意项

在@media screen and (max-width||min-width)样式区分截点的格式必须严格遵守,任何一个空格问题都会造成显示错误。将越小的设备css存越下面,并且响应式页面最小字体为12px,将谷歌浏览器的控制台放置在页面右边显示,这样大大提高响应式布局css的书写效率,rem单位最好的换算比例为625%,62.5%的换算会有误差。特别是在pc端,在高度范围下有时候用px去写死是不错的选择。

三、H5响应式网站js部分

做H5响应式网站要展示多张背景图Js部分有多种选择,这里佛山网站制作公司优加网络科技就列举两种做法。第一种是,用insertAfter函数去控制图的定位是最好的选择,事先把对应div容器用css样式写好,那么在左右切换图层的时候只要把对于的第一张图或是最后一张图的节点位置进行调整,配合上transition属性,这样无论是在代码量以及性能上都是最好的选择之一,唯一不足的就是兼容问题。第二种做法就是事先将所有的连接地址用数组存起来,由于目标层节点的index一直在改变,所以在初始化的时候就预先给每个容器加上其对应的class名+index值(这样在之后无论节点如何变化,这个初始的class名中保留下的index值能与对应的链接挂钩,但是也可以用data去保存,接下来全局用一个index值来控制焦点位子,每次移动把焦点位子加上用正则匹配class得来的链接地址,而其他的则去掉链接地址。

四、特效部分3d旋转轮播

如果光为了实现一个3d旋转不算什么难事,但是由于手机端的存在,3d旋转在pc端竖直切割,而手机端将会横向切割,并且所有的宽长度参数由于响应式的介入将都成为不确定因素,几乎所有的值都是未知数,所以这部分的计算比较烧脑,但是值得注意的是,由于所有长宽不能写死都需要计算而得,所以要注意js在运算过程中小数点的误差。

网站声明:以上文章内容为优加的原创文章,如需转载,请注明出处,谢谢合作!
0 喜欢
2603 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解