技术总结:
移动端的问题
1. border 涉及到1px线的问题最好给宽度为具体的像素 不要给rem,因为很多的手机不支持0.5像素,可能会发生问题
2. 图片最好给背景图片(在图片尺寸不统一的情况下)
3. 注意css3的前缀
4. 国产手机自带浏览器(如华为),有的外联样式会有问题。
5. 文字垂直居中最好用padding
6. 盒子水平居中 用inline-block + text-align:center 或者 margin: 0 auto;
7. 页面要跳到某位置 用 window.scrollTo(0, 100)
8. 页面移动到某位置 用 $('html,body').animate({scrollTop:0}, 400} (注意冲突)
9. line-height:1 能解决文字的自动设置边框问题
10. 设置文字大小用font-size
PC端的问题
1. 解决jquery animate({scrollTop$pos},500)与$(window).scroll方法冲突的问题
当点击节点时 先移除$(window).on("scroll")监听事件 在animate动画结束之后再添加上
共性问题:
1. 导航栏进行自动fixed定位时,在fixed之前的position最好脱标或者有个隐藏空白盒子准备显示以撑起原来的大小