移动web开发入门教程思维导图

移动web开发入门教程完整版分享！内容覆盖移动web、移动web的注意点、tips、常见前端编辑器、视网膜屏幕等内容，学习移动web开发的同学快收藏起来。

移动web开发入门教程思维导图

• 移动web
  • 移动端的页面
  • 大部分的用户对于网络的使用,依托于移动设备即可
  • 设备
    • 平板
    • 手机(智能手机)
  • 移动web页面的作用
    • 让用户以一个轻量级的方式体验app
    • 吸引用户去安装app
    • 跟微信小程序有异曲同工之妙
  • 公司在开发app之前可能会先做一个 移动web页面 让用户去体验,去找投资商要钱
  • 成熟的公司
    • ios的app
    • 安卓的app
    • 移动web页面
  • 注意点
    • 在较小的屏幕尺寸上,让用户看的清晰
    • 关于这个技术,app的开发者已经试验了很久,并且小不错
    • 所以,移动web跟app的外观 很像
• 移动web的注意点
  • 移动端的操作系统
    • 安卓
    • ios
    • windowsphone
    • 塞班
    • 黑莓
  • 移动端的浏览器
    • 安卓内置的 谷歌浏览器
    • ios 内置的 Safari
    • uc
      • 不支持弹性布局
    • qq
    • 百度
    • 360
    • chrome
    • 猎豹
    • 内核 都是 webkit
      • 经常会收到更新app的 提示
      • 好处就是,浏览器版本都很新(新式浏览器)
      • 移动端h5 c3 可以 放心 大胆的用,兼容性 非常好
    • 移动端的浏览器兼容性 基本上只需要考虑 wbkit内核即可
    • 注意点:
      • 越大的公司,考虑的东西越多
  • 电脑上查看移动端界面
    • 在桌面端的浏览器中已经整合了 移动端界面模拟显示
  • 老版本的谷歌移动端界面设置较多,在调试阶段可以选用 老版本
    • 建议使用绿色的
    • 安装最新的
  • 绿色版本谷歌使用
    • 将想要调试的页面 直接拖入url 会在当前页打开
    • 拖入标签栏 会在新页面打开
• tips
  • 修改谷歌浏览器的搜索引擎,可以直接在url中输入内容搜索,提升 工具使用效率
• 常见前端编辑器
  • HBuilder
  • vscode
  • atom
  • sublime
  • webstorm
  • brackets
• 视网膜屏幕
  • 分辨率 跟 像素点关系 是 2倍关系的有
    • 4,4s,5,5s,se,6
    • 6plus 6splus
  • iphone5
    • 分辨率
      • 320*568
    • 屏幕中的像素点
      • 640*1136
  • 肉眼看不清 最小的 像素点
• 左右两张的无限轮播
  • 最左边 加上最后一张图
  • 最右边 加上 第一张图
  • 默认给用户看的 如果用索引来说 是索引为1的
• 明天的任务
  • 找回写布局的感觉
  • 尝试着通过示例程序往后继续写
  • 忘记了的布局,大伙之间互相讨论
    • 被问得人 能够加深印象
    • 问的人 锻炼口才
    • 两个人 friend
    • oh-yeah