(适配方案总结)客户薅公司两台ipad，我还要给做适配？

大佬们好，我是季夏廿九，专业切图仔。🦞

🌲🌲🌲 前言：

    前两天产品经理突然提出一个需求，让把之前写好的十个项目(综合门户下面好多子项目)做一下ipad适配，要给领导演示。我：？？？用电脑不能演示？产品经理又说：领导太忙了，ipad方便。我：笔记本不方便？？？产品经理说：客户要求要用ipad还要买两台。额，那我懂了🙃️薅羊毛被连带了，擦💦

    哈哈，开个玩笑。言归正传，上面那个问题因为很多项目开发的时候主要就是针对pc浏览器的，所以就没有做适配方案。除了其中一个大屏，这个大屏的后面再说。因为之前的项目是不同的同学开发的，而且时间紧任务重，所以就采用了一次性的方案。页面少、简单而且用了百分比的就用媒体查询在写一套针对的样式，页面多的就用了一个对比缩放的方案：👇

window.addEventListener('resize', () => {
   
  fun();
});
const heightAll = ref(document.documentElement.clientHeight);
const fun = () => {
   
  let devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
  let scale = devicewidth / 1440; // 分母——设计稿的尺寸
  heightAll.value = document.documentElement.clientHeight / scale;
  document.body.style.zoom = scale; //放大缩小相应倍数
};
fun();

    这样做的很粗糙，但好在react和vue都能快速使用，算是解决了这个需求。但是这也只是暂时的，所以闲下来就好好整理了一下适配的方案，给各位大佬分享一下，希望对大佬们有所帮助。

为什么要做屏幕适配？

    适配适配，那我们为什么要做屏幕适配了？当然这也是一个常识性问题：一方面是因为现在的设备五花八门，屏幕大小以及分辨率都是不一样的，总结来说为了用户体验，让用户看到的页面都是正常的，所以要做适配。还有就是现在是移动互联网时代，移动端的适配也是重中之重。同样的dp,在不同手机的显示上面还是有差别(这也是经典的移动端1px问题产生的原因)，所以适配还是必须要做的。

响应式和自适应

    要做适配，那我们肯定避免不了选择响应式还是自适应的方案。梳理一下响应式和自适应的概念我们再继续往下说。

    首先两种方案解决问题的方法是不一样的：

    响应式：让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小和布局。

    自适应：在不同大小的设备上让用户看到布局相同的网页。

看了两种方案的概念，那么他们的优缺点相信各位大佬也心里有数。