移动端开发、各种兼容问题、响应式布局开发、移动端和PC端开发的不同

---

一、移动端开发

移动端开发：把开发的产品放在移动设备上（例如：手机、平板…）运行

• NativeApp 原生App
  • 技术栈：IOS(object-c或swift)、安卓(java-native)
  • 当下有一些前端框架，可以基于JS进行开发，最后生成符合各系统的NativeApp
    • Vue：uni-app
    • React：react-native
    • Dart：flutter
• WebApp HTML5页面
  • 技术栈：H5、CSS3、响应式布局、ES6+、Vue、React…
• NativeApp+WebApp -> Hybrid混合App开发 「手机应用90%以上都是Hybrid模式开发的」

二、移动端开发和PC端开发的不同

大部分都是相同的，技术栈也是统一的

1、@1 响应式布局开发

• PC端开发，大部分是“固定布局”；但是对于一些“全屏的管理系统「有且只有一屏幕」”，我们需要根据设备的宽高，自适应里面内容的排版或者样式！！
  处理方案：以百分比布局为主「vw/vh」，再基于@media实现微调，flex是排版的辅助工具！
  如果内容超过一屏幕的高度，则给某个盒子设置局部滚动！！
• 移动端开发：基本上都要考虑响应式
  flex & grid 等布局方案都是辅助！！
  @1 PC端和移动端用一套项目，一般都是企业/产品的介绍网站，结构样式相对简单
  处理方案：@media
  @2 移动端有专门自己的项目，和PC端是分开的，只需要考虑手机端的适配
  • 正常情况：基于REM响应式布局开发技巧实现
  • 移动端全屏：REM+VW/VH+@media

总结：响应式布局方案基本以三类为主

• 基于@meida，设定多个条件，在不同条件下实现结构和样式的微调整
• 基于VW/VH的百分比布局「“流式布局”」，这种模式下，盒子的宽高都用百分比实现自适应，适合于“全屏类”的项目
• 基于REM的等比缩放布局，移动端项目一般都用这种方案
  很多情况下，我们完全可以基于三种混合的模式，开发出想要的“响应式布局”产品！！

@2 移动端事件的处理

• PC的操作大部分基于鼠标，所以事件类型以“mousexxx”为主；但是移动端的操作以手指为主，所以mouse系列事件在移动端兼容性都不好；
• PC端的click是“点击”事件；移动端的click是“单击”事件；
  • 点击：不论点击的速度快还是慢，只要点一次，就会触发
  • 单击：第一次点击完成后，观察300ms内是否有第二次点击，如果没有，则认为是单击，如果有则认为是双击
• 键盘事件：PC端存在物理键盘，移动端键盘都是虚拟键盘，所以keydown/keyup/keypress事件在移动端兼容也不是很好，如果移动端想监测用户的输入，用的是 input 事件！
  • 移动端的事件都是基于手指操作的
    • touch事件模型「单手指」：单击、点击、双击、长按、滑动…
      • touchstart
      • touchmove
      • touchend
      • touchcancel
    • gesture事件模型「多手指」：旋转、缩放…
      • gesturestart
      • gesturechange
      • gestureend
• click在移动端存在300ms延迟问题！！
  • fastclick.js 可以解决300ms延迟问题
  • Hammer.js 封装好的移动端手势事件库
  • Zepto.js 也封装了一些移动端专属的事件方法：tap/singleTap/doubleTap/longTap/swipe/swipeLeft(Right\Up\Down)/pinch/pinchIn/pinchOut/…
  • …

@3 关于兼容上

• PC端一般要考虑IE浏览器「目前一般考虑在IE10+」：所以需要对CSS3样式属性 以及 ES6+ 的语法进行兼容处理
• 移动端浏览器都是webkit内核，无需考虑IE，但是需要考虑一些低端机型{浏览器版本低}（看公司要求）:所以对于CSS3和ES6+也需要进行兼容处理

2.关于CSS3的兼容

• PC端一般要加很多前缀

     -webkit-transition:all 1s;
     -moz-transition:all 1s;
     -ms-transition:all 1s;
     -o-transition:all 1s;
     transition:all 1s;
  

• 移动端只需要写两套即可

    -webkit-transition:all 1s;
    transition:all 1s;
  

感觉自己写麻烦，我们可以基于插件或者webpack解决

• 插件：prefixfree.min.js 导入这个JS后，会给CSS3样式属性自动设置上对应的前缀，我们写“transition:…” 即可!

• webpack：基于browserlist浏览器兼容列表 + postcss-loader，自动设置前缀

  3、关于ES6+的兼容

  不论是PC端还是移动端：

  • 都是基于 browserlist + babel 「webpack」把ES6语法转换为ES5
  • ES6中的某些内置API，要单独基于 @babel/polyfill 进行重写，写成兼容IE的API！！
    移动端不考虑特别低端的机型，ES6基本上不用处理兼容！！{但是我们需要减少使用ES6以上的语法}

  ---

  4、还有一些移动端独有的兼容问题：

  • 一像素边框问题：设计师给750的设计稿中，边框是1px，我们放在375的设备上，边框应该是0.5px，但是边框最小是1px！！
    • 解决方案：基于transform:scale(.5)进行整体缩放
  • position:fixed定位问题
  • …

三、DPR：屏幕像素密度比「高清屏：2倍屏、3倍屏」

• 设备的物理宽高
• 设备的分辨率

四、REM响应式布局开发

@1 按照设计师给的750的设计稿进行开发
第一步：设置html的字体大小

html{
          //设定的值最好方便计算「因为需要自己计算」
          //浏览器最小字体12px
          font-size:100px;  //=>750的设计稿中 1REM=100PX
        }

第二步：测量出对应的尺寸(px)，把其变为rem，进行样式的编写

.box{
          width:2.68rem;
          height:1.42rem;
        }
        ...

@2 如果在750的页面中渲染，按照上述的REM和PX换算比例是没问题的；但是如果放在375的页面中渲染，我们只需要调整REM和PX的换算比例「也就是修改HTML的字体大小」，这样比例改了，所有之前写的样式，代码无需动，但是渲染的样式值自己会跟着缩放！！
根据当前设备的宽度 和 设计稿750做对比，计算出当前设备的REM和PX换算比例“@A”
750/100 = 设备宽度/@A
–>
@A = 设备宽度/750*100
如果设备宽度超过750，我们一般不在放大这个转换比例了!!