移动端学习路线及知识点总结概述

需要掌握的知识要点

• 知道移动端开发现状
• 能够写出标准的viewport
• 能够使用移动web的调试方法
• 能够说出移动端的常见布局方案
• 能够描述流式布局
• 掌握移动端技术解决方案

---

视口viewport

• 定义：页面内容的屏幕区域，是抠分为布局视口、视觉视口和理想视口

布局视口layout viewport

• ios,Android基本都将这个视口分辨率设置为980px

视觉视口

• 按照pc原比例展示，但可以通过缩放去操作视觉视口。

ideal viewport

• 需要手动添写meta视口标签通知浏览器操作。

---

移动端图片处理采用倍图的形式

• 物理像素&物理像素比
• 例：pc1px在iphone8里面等于2个物理像素

移动端开发选择

• 单独移动端页面（主流）：通常情况下，网址域名前面加m可以打开移动端。通过判断设备，如果是移动设备打开，则跳转到移动端页面。
• 响应式兼容pc移动端：通过判断屏幕尺寸进行相应式的布局，比如媒体查询。

---

移动端浏览器兼容问题

• 移动端浏览器基本以webkit内核为主，私有前缀只需要考虑添加webkit即可。
• 移动端初始化推荐使用normalize.css,下载方式：npm install normalize.css

---

css3盒子模型

• css3里面padding和border不会撑大盒子
• 将传统盒子模型改为css3盒子模型：box-sizing:border-box

移动端布局技术选型