移动端页面开发之旅

个人觉得做移动端网页三大难点

  • 自适应
  • 动画的效率
  • 移动端js事件的使用

开始

  • 写移动端的第一步是在head标签里添加
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" charset="utf-8 " />
上面声明,手机视口宽度=屏幕宽度,默认不可缩放

  • 开发环境
    可以使用http-server,browser-sync
    browser-sync 可以对文件进行监测,保存后自动刷新浏览器实现同步预览
    可以在手机和电脑同时访问
    前端开发工具-代理服务器
  • 调试环境
    谷歌浏览器 F12,推荐将调试框放在右边
chrome调试

动画的效率

  • opacity
  • translate
  • rotate
  • scale

js事件的引用

jquery包对于移动端有点太重
移动端使用click时间有300s的延时,一般将click事件改为tap事件()

想进步的话~多去看看大公司的布局和css用法

资料

查看各个手机数据
基础方面
一篇真正教会你开发移动端页面的文章--像素比
移动web页面前端开发总结
如何精确控制响应式排版
性能方面
网页性能管理详解
前端性能优化(CSS动画篇)
移动web开发问题和优化小结
Web动画性能指南 Beta
我的动画
波纹星球招新页面
移动web开发问题和优化小结]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容