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

文章目录 一、移动端开发二、移动端开发和PC端开发的不同1、@1 响应式布局开发2.关于CSS3的兼容3、关于ES6+的兼容4、还有一些移动端独有的兼容问题： 三、DPR：屏幕像素密度比「高清屏：2倍屏、3倍屏」四、REM响应式布局开发

---

一、移动端开发

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

NativeApp 原生App 技术栈：IOS(object-c或swift)、安卓(java-native)当下有一些前端框架，可以基于JS进行开发，最后生成符合各系统的NativeApp Vue：uni-appReact：react-nativeDart：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事件模型「单手指」：单击、点击、双击、长按、滑动… touchstarttouchmovetouchendtouchcancel gesture事件模型「多手指」：旋转、缩放… gesturestartgesturechangegestureend 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语法转换为ES5ES6中的某些内置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，我们一般不在放大这个转换比例了!!