需要掌握的知识要点
- 知道移动端开发现状
- 能够写出标准的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
移动端布局技术选型