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