0515日重点:1.微信浏览器等导航条所占高度, 2.同一个元素切换不同样式效果 3使用http-server在手机上快速浏览.H5页面

1.一般来说,当H5页面放入手机后,无论在app里,还是微信,浏览器等内打开,即使都有导航条在,但是页面可以自动出现滚动条.不会影响到页面的渲染.

但是如果H5页面因需要,必须设定了overflow:hidden的情况下.则页面定死,不会出现滚动条.

这时候.就要考虑到导航条索要占的高度了.否则页面会被导航条往下挤,导致会有一部分内容无法显现.

各浏览器导航条高度不同.

获取导航条的高度:  var hight=window.screen.height - window.innerHeight;

页面内的各元素的定位就要相应的减去导航条的高度,这样页面才能全部渲染出来.

如下图:

 

 

2,一个元素,可以通过给他穿上不同的class, 切换class, 从而产生不同的样式的改变效果.

例如:设两个class只有背景图片不同. 切换元素的class.达到一个元素能有两个背景图片的切换效果. 

 

 

3.H5页面,可以通过http-server的方法,在同一局域网内,做到快速的在手机上查看效果.