移动端学习路线及知识点总结概述
需要掌握的知识要点
-
知道移动端开发现状 能够写出标准的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
移动端布局技术选型
上一篇：
通过多线程提高代码的执行效率例子