美文网首页
移动端页面开发之旅

移动端页面开发之旅

作者: scarqin | 来源:发表于2017-02-22 17:44 被阅读28次

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

  • 自适应
  • 动画的效率
  • 移动端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开发问题和优化小结]

相关文章

  • 移动端页面开发之旅

    个人觉得做移动端网页三大难点 自适应 动画的效率 移动端js事件的使用 开始 写移动端的第一步是在head标签里添...

  • 移动端开发单位使用问题

    前言 PC 端页面开发与移动端页面开发: PC 端页面开发需要考虑更多的兼容性问题,ie、谷歌、火狐等浏览器各自内...

  • 一篇真正教会你开发移动端页面的文章(一)

    一个移动端的时代 从我工作以来,开发的一直都是移动端的页面,只有偶尔去开发几个PC端的页面,现在是一个移动端的时代...

  • 移动端页面开发

    如何在手机上调试 1,手机和电脑处于同一个 wifi2,在电脑上启动一个 http server npm i -g...

  • 移动端页面开发

    布局视口 在PC端,布局视口就是浏览器窗口 视口的宽度 = 浏览器窗口的宽度 通过以下JavaScript代码获取...

  • 移动端页面开发

    视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,如果是为了显示整个为了为PC端设计的网页,那...

  • 16日总结

    WEB前端开发工程师 PC端(电脑) -页面移动端(手机) -页面 ---- 用户体验问题 需要:...

  • 移动web开发调试工具eruda(适合app混合开发)

    一、介绍: 相信一开始开发移动端web页面的小伙伴会有一个问题,移动端页面在移动设备上真机调试或者是app混合开发...

  • 移动web开发调试工具vorlon(适合app混合开发)

    一、介绍: 相信一开始开发移动端web页面的小伙伴会有一个问题,移动端页面在移动设备上真机调试或者是app混合开发...

  • 在上海乐字节学习Java前端-总结

    web前端学习知识点总结: 基础:HTML+CSS网站页面搭建,CS核心和PC端页面开发,HTML5移动端页面开发...

网友评论

      本文标题:移动端页面开发之旅

      本文链接:https://www.haomeiwen.com/subject/ownmlttx.html