课程目标

01 能够知道移动web的开发现状
02 能够写出标准的viewport
03 能够使用移动web的调试方法
04 能够说出移动端常见的布局方案

一、移动端基础

1.1 浏览器现状

1.2 手机屏幕现状

1.3 常见移动端屏幕尺寸

1.4 移动端调试方法

1.5 总结

二、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

2.1 布局视口 layout viewport

2.2 视觉视口 visual viewport

2.3 理想视口 ideal viewport

2.4 meta视口标签

2.5 总结

三、二倍图

3.1 物理像素&物理像素比

3.2 多倍图

3.3 背景缩放 background-size

3.4 多倍图切图 cutterman

四、移动端开发选择

4.1 移动端主流方案

4.2 单独移动端页面（主流）

4.3 响应式兼容PC移动端

4.4 总结

五、移动端技术解决方案

5.1 移动端浏览器

5.2 CSS初始化 normalize.css

5.3 CSS3 盒子模型 box-sizing

5.4 特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }