React Web App基础知识准备

一、移动web开发硬知识

什么是移动web
iOS，Android
2G, 3G, 4G
HTML5
viewport
hybrid

移动web开发概述：

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

移动web调试篇

Chrome Devtools调试
真机调试

移动web适配篇

web前端适配方法：
PC
960px/1000px居中
盒子模型，表格，定高，定宽
Display:inline-block
移动web:
定高，宽度百分比
flex
Media Query(媒体查询)

Viewport和流式布局
Css flex和media query媒体查询适配
rem原理和适配方法
移动端其他适配问题

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

物理像素和CSS像素

放大或缩小网页，会改变像素比

移动设备的视窗概念

layout viewport（布局视窗）
Visual viewport（物理视窗）
Idea viewport （理想视窗）
layout viewport：浏览器的初始视窗大小和浏览器厂商有关
Visual viewport：可视范围的大小，浏览器特性，将页面内容刚好缩放到可视区域
Idea viewport：

<meta name = "viewport" content = "width=device-width, 
initial-scale=1.0,maxium-scale=1.0,user-scalable=0"/>

流式布局：

display: -webkit-flex;
display:flex;

flex-direction
flex-wrap
justify-content
align-items

order
flex
align-self

order:<integer>;
flex: flex-grow|flex-shrink | flex-basis

Media Query(媒体查询)

@media 媒体类型 and (媒体特性){
  /*css样式*/
}

媒体类型： screen, print… 媒体特性：max-width, max-height …

高级适配方案

rem

• 字体单位 值根据html根元素大小而定，同样可以作为宽度，高度等单位。
• 适配原理 将px替换成rem, 动态修改html的font-size适配
• 兼容性 iOS 以上和Android 2.1以上，基本覆盖所有流行的手机系统
  vw,vh,wmin,vmax
• vw: 1vw等于视口宽度的1%
• vh: 1vh等于视口高度的1%
• vmin: 选取 vw 和 vh 中最小的那个
• vmax: 选取 vw 和 vh 中最大的那个
  兼容性：iOS 8 以上 Android 4.4 以上支持

移动端touch事件

touchstart//手指接触屏幕时触发
touchmove//已经接触屏幕的手指开始移动后触发
touchend//手指离开屏幕时触发
touchcancel//当某种touch事件非正常结束时触发

300ms点击延迟
双击缩放（double tap to zoom）, 需要300毫秒判断是双击还是单击

如何避免

1. 加meta标签

<meta name = "viewport" content = "width=device-width, 
initial-scale=1.0,maxium-scale=1.0,user-scalable=no"/>

2. Tap组件（FastClick, react-tap）
   最新的iOS上移除了300ms延迟

点击穿透
touch->click
touch事件的target消失，触发底部click
避免方法： 不要混用touch和click

二、移动web开发软技能

git

见其他笔记

构建工具

预处理
资源压缩与替换
代码与测试
文件监听与更新

构建工具： grunt gulp
模块化工具: webpack

Sass预处理工具