移动 WebApp 开发 -- 笔记

 

Web3.0 时代，Mobile  Frist，

在做某一个产品，先想到他的移动端，逐渐衍生出 H5

 

移动 Web 开发与传统 PC 端开发

• 跑在手机端的页面（H5页面）
• 跨平台
• 基于 webview
• 告别 IE 拥抱 webkit
• 更高的适配和性能要求

一、什么是移动web

• 操作系统  IOS ，Android
• 网络 2G，3G，4G 有线
• HTML5 新特性，H5 提供的一些新的 API 都是跟移动web相关的
• 适配 viewport
• hybrid

移动web调试篇

PC调试

• alert()
• Firebug
• Chrome Devtools

移动web调试

• Chrome Devtools调试
• 真机调试方法

移动web适配篇

web前端适配方法

PC

• 960px/1000px 居中
• 盒子模型，表格，定高，定宽
• Display:inline-block

web

• 定高，宽度百分比（对适配要求不高）
• flex
• Media Query（媒体查询）

　　flex 和 媒体查询共同构成了响应式布局

移动web开发适配

• Viewport和流式布局
• Css flex 和 media query媒体查询适配
• rem原理和适配方法

 

viewport视窗

• 什么是css像素，物理像素？
• 手机打开PC页面刚好被等比例缩放
• 设备宽高和viewport有什么关系
• 如何使用meta设置viewport

 

三、移动 WebApp 开发技术栈

• webpack4
• Sass
• React + Redux
• rem
• Jsbridge + ios