- 移动端使用的模拟器
- 什么是视口（viewpoint）
- pc端视口的宽度和浏览器的宽度一样
- 布局视口：将pc页面直接搬到移动端，视口宽度与浏览器宽度不关联，完全独立，甚至远大于屏幕的宽度（普遍用法）
- 视觉视口：视觉视口与设备屏幕一样宽，通过用户的缩放而改变
- 理想视口：让用户拥有最理想的浏览和阅读，用户进入页面不需要再缩放来观看（<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">) 快捷键是meta:vp+tab
- width=device-width 视口宽度等于设备宽度
- user-scalable=no 禁止缩放
- initial-scale=1.0 页面初始缩放程度
- maximum-scale=1.0 最大缩放程度
- minimum-scale=1.0 最小缩放程度
- 响应式布局的思想
- 弹性网格布局、弹性图片、媒体和媒体查询整合起来，命名为响应式布局；
- 技术点：盒模型、浮动、
- 浮动：父元素中设置display：flex；将父元素转化成弹性盒模型；并在子元素中加入flex:num,设置比例
- 优点：面对不同分辨率设备灵活性强，能够块结解决多设备显示适应问题
- 缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长
- 移动端使用的单位
- em：可变单位，依据父级变化 例：父元素font-size：14px；子元素font-size:2em；//28px;子元素font-size:2rem；//32px
- rem：可变单位，依据根节点变化(r=root)
- px像素 1em=16px=100%=12pt; 系统默认的字体是16px
- 百分比
- pt points
- 移动世界的到来
- 移动互联网的发展
- 智能手机迅速发展
- 移动web应用的发展
- 移动端开发和pc端开发的区别v
- 设备
- 分辨率 1024 1920 ....
- 界面布局
- 输入特性（鼠标 键盘 触摸）......
测试
- pc：用各种浏览器测试
- 移动端：用模拟器（Android SDK【虚拟设备AVD】/ios模拟器/chrome）chrome用的最普遍
-
- all 所有设备
- Braille 盲文处决回馈设备
- embossed 盲文打印机
- print 打印设备
- projection 投影设备
- screen 电脑显示器
- tv 电视机设备
- 外部分类别引入，实现多设备适配：
内部分类引入，实现多设备适配：
