移动端一些前端经验要点总结

Home文章
 简介:以下总结偏业务,开发自动绕过~
通用部分
  1. 尽量避免用绝对定位,fixed,很耗资源的
  2. 能用样式实现的尽量不用js,这条到处都适用
  3. transition 尽量指定具体的值,避免不必要的浪费
  4. 一个好的resetcss和head能帮你减少很多不必要的麻烦
  5. 关于dom库,其实个人更偏向于js原生的来替代,比如document.querySelectorAll('h1'),document.querySelector('h1').classList.add('xxxx');
    很多jquery的功能都能代替,兼容性都挺不错的。不用库的感觉自己像公牛,浑身都是劲。
  6. 资源和http之类的优化,把你知道的都用上吧
  7. flexbox这个布局很强大,很强大
  8. 移动端流量很重要,很重要,首屏加载,图片懒加载不得不单独列一下
  9. 图片双倍单倍清晰度,这个加上更好,很多时候偷懒直接双倍上(时间不够)
  10. 拥抱无图片技术应用,canvas、svg、纯css,font-icon
  11. rem计算值,推荐用sass这种预编译器搞定
 
关于内容页
  •     比如新闻咨询之类的,个人觉得还是百分比+弹性盒子比rem略好(纯属个人观点)
  •     字体用像素确定,因为很受不了横屏字变大的感觉
  •     图标建议用font-icon,推荐阿里的自动化库, http://www.iconfont.cn/   ,当然需要和设计同学提前沟通好,无论是高清还是调整对前端来说就是一个字‘爽’
 
活动页
  1. 这个推荐rem来适配或者在此基础上另一个更好的办法,用js来控制缩放这种无断点的适配。
  2. 单页满屏设计稿背景一定要比预期大一些,防止保持比例的情况下适配出现露白。
  3. 简单的触屏事件自己搞定吧,稍微多一点的建议用个简单库,百度的dragjs,复杂的hammerjs手势库(不记得怎么拼了,也不查了)
 
一些坑:
  1. 一些手机touchend失效
  2. 点击链接300ms延时
  3. dom库操作style某些手机失效
  4. 尽可能用真机测试,或者用同事的手机,当然公司同事手机配置有可能偏高,导致结果不具代表性
  5. 微信内推广页要考虑顶部有自带顶部,导致比设计稿预期高度短一些


评论
Login