移动端网页开发基础

什么是Web开发

• 针对移动端的Web开发
• 手机
• 平板电脑

前端开发分类

• PC端开发
• 移动端开发
• 移动Web开发
• 混合式开发(Hybrid App)
• 微信小程序/公众号开发

我们要学什么

• 移动Web开发基础概念
• 移动Web开发基础知识
• 响应式布局
• 移动端屏幕适配
• 移动端事件
• 移动端调试
• 终端检测
• 移动端常见问题
• 移动端性能优化

像素

• 分辨率
• 物理像素
• CSS像素
• 设备像素比（dpr）

物理像素

• 物理像素（physical pixel）
• 设备像素（dp：device pixel）

CSS像素

• CSS像素

.box {
	width: 200px;
	height: 200px;
}

• 逻辑像素（logical pixel）
• 设备独立像素（dip：device independent pixel）

设备像素比

• 设备像素比（dpr：device pixel ratio）
• dpr = 设备像素 / CSS像素（缩放比是1的情况下）
• dpr = 2 表示 1个css像素用 2x2个设备像素来绘制
• 缩放改变的是CSS像素的大小

PPI

• 每英寸的物理像素点
• ppi：pixels per inch
• dpi：dots per inch
  
  视口–viewport
• width=device-width
• initial-scale=1
• maximum-scale=1, minimum-scale=1, user-scalable=no

document.documentElement.clientWidth
document.documentElement.getBoundingClientRect().width
window.innerWidth
screen.width 不要用，有兼容性问题
window.devicePixelRatio

box-sizing

• content-box
• border-box

图标字体
阿里巴巴矢量图标库（https://www.iconfont.cn/)

flex布局—容器属性

• flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow: <flex-direction>|| <flex-wrap>;
• justify-content: flex-start | flex-end | center | space-between | space-around;
• align-items: flex-start | flex-end | center | baseline | stretch;
• align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex布局—项目属性

• order: ;
• flex-grow: ; /* default 0 */
• flex-shrink: ; /* default 1 */
• flex-basis: ; | auto; /* default auto */
• flex: none | [ <flex-grow> || <flex-shrink> || <flex-basis> ]
• align-self: auto | flex-start | flex-end | center | baseline |
  stretch;

媒体查询

• 媒体类型
• all/print/screen/speech
• 逻辑 与（ and ）、或（,）、非（not）

媒体特征表达式

• width/orientation/device-pixel-ratio/aspect-ratio
• 策略: 移动优先/PC优先

移动端常用单位

• px
• %
• em
• rem
• vw/vh

什么是响应式布局

• 2010年5月由 Ethan Marcotte 提出的一个概念
• 一个网站兼容多种终端
• 对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动Web开发方式

响应式布局的原理
什么是栅格系统

• 响应式布局的一种实现方式
• 将页面栅格化

移动端屏幕适配是什么

• 移动端
• 屏幕适配
• 使页面在移动端各种大小的屏幕上都能够正常显示的一种移动端开发方案

与响应式布局的关系：适应各种屏幕尺寸

	移动端适配	响应式布局
终端	仅移动端	PC端和移动端
常用单位	宽高：rem / % 字体：px	宽：%高、字体：px
宽和高	宽和高都随着屏幕大小变化等比例	宽度变化，高度不变非等比例

移动端适配疑问

• 必须使用rem?
• px、%、em、rem、vw/vh
• 媒体查询只能用在响应式布局？

其他适配方案

• 固定宽高
• vw/vh

简单适配方案

• docEl.style.fontSize = viewWidth / ratio + ‘px’
• viewWidth = docEl.getBoundingClientRect().width ||
  window.innerWidth
• ratio = 18.75

通用适配方案

• dpr = window.devicePixelRatio || 1
• scale = 1 / dpr
• content = ‘width=device-width, initial-scale=’ + scale + ‘,minimum-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘,user-scalable=no’;