移动端导学

• 移动端使用的模拟器
• 什么是视口（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依据父级变化
  • rem依据根节点变化(r=root)
  • px像素 1em=16px=100%=12pt;
  • 百分比
  • pt points
• 移动世界的到来
  • 移动互联网的发展
  • 智能手机迅速发展
  • 移动web应用的发展
• 移动端开发和pc端开发的区别v
  • 设备
  • 分辨率 1024   1920  ....
  • 界面布局
  • 输入特性（鼠标 键盘 触摸）......

测试

• pc：用各种浏览器测试
• 移动端：用模拟器（Android SDK【虚拟设备AVD】/ios模拟器/chrome）chrome用的最普遍

媒体类型（@media 媒体类型 、关键字（and  only  not） 、媒体特性（width/height宽高.device-width/device-height设备宽高.orientation:landscape横屏.orientation:portrait竖屏）{样式代码}）*css3*

• • all 所有设备
  • Braille 盲文处决回馈设备
  • embossed 盲文打印机
  • print 打印设备
  • projection 投影设备
  • screen 电脑显示器
  • tv 电视机设备
　　

外部分类别引入，实现多设备适配：

　　　内部分类引入，实现多设备适配：