常见的屏幕尺寸：
- 1280 * 720 ： 笔记本
- 1366 * 768 ： 普通液晶显示器
- 1920 * 1080： 高清液晶显示器
- 2560 * 1440： 2K高清显示器
- 4096 * 2160： 4K高清显示器
接下来按照1920*1080为例进行的操作：
一、zoom，火狐浏览器全系列不支持CSS的zoom缩放属性。
1、windows 页面在谷歌浏览器适配正常，edge浏览器基本正常，少量的位置偏移
2、mac 谷歌浏览器适配正常 ，edge浏览器基本正常，少量的位置偏移， safary浏览器显示位置错乱
3、使用zoom浏览器图表选中效果错位（通过在图标位置反向zoom可以解决这个问题）
二、transform
transform:scale(..);
transform-origin:..;
1、各浏览器适配正常，始终以变化大的一边为基础进行缩放
function bodyScale() { var devicewidth = document.documentElement.clientWidth; var deviceheight = document.documentElement.clientHeight; // if (navigator.userAgent.indexOf('Firefox') >= 0) { var scale = (devicewidth / 1920).toFixed(2); // 分母——设计稿的尺寸宽度 let left = (1920-devicewidth)/2 var scaleHeight = (deviceheight/1080).toFixed(2) let top = (1080-deviceheight)/2 let element = document.getElementsByClassName('BasicLayout')[0] let elementApp = document.getElementById('app') if(scale < scaleHeight){ element.style.transform = 'scale('+scale +')'; let top = (deviceheight - element.scrollHeight * scale)/2 let left = (elementApp.clientWidth - element.scrollWidth * scale )/2 element.style.top = top + 'px' element.style.left = left + 'px' }else{ let left = (devicewidth - element.scrollWidth * scaleHeight )/2 element.style.transform = 'scale('+scaleHeight+')'; let top = (elementApp.clientHeight -element.scrollHeight * scaleHeight)/2 element.style.top = top + 'px' element.style.left = left + 'px' } } window.onload = window.onresize = function () { bodyScale(); };
2、强制铺满
element.style.transform = "scale(" + scale + "," + scaleHeight + ")", element.style.transformOrigin = "left top", element.style.backgroundSize = "100% 100%"
3、按照屏幕原比例溢出滚动展示
不做以上除了即可实现
三、rem+grid（或百分比）
当页面首次加载时，判断视口的宽高，如果视口的宽/高 > 16/9 则说明视口宽度比较设计图宽，实际的显示宽度应该等于视口的高度*16/9。
如果视口的宽/高 < 16/9 则说明视口高度比设计图高，实际的显示宽度应该等于视口的宽度，显示高度应等于视口宽度 / (16/9)。
然后设置 font-size: pageWidth / 100 px，这样就可以做到100rem等于100% width，之后所有大小的设置都通过rem来做即可。
四、vw和vh适配方案
屏幕视口宽度 = 100vw，屏幕视口高度 = 100vh
vw和vh也是css中标准的单位，和px,rem, %一样 vw和vh适配方案，按照设计稿的尺寸，将px按比例计算转为vw和vh
**注意事项**
三和四需要保持所有的页面设置都保持一直（图表要根据页面变化而变化）
scale 进行缩小缩放时候，虽然内容缩小了，但是占用的空间却没有变化。zoom 最初仅在 Internet Explorer 中实现。尽管其他一些浏览器也支持该属性，但推荐使用transform: scale() 来缩放内容。transform: scale() 与 zoom 的工作方式不同。
例如，如果在 html 或 body 元素上使用transform: scale(0.6) ，那么它会调整整个页面的大小，显示一个缩小的页面，周围有巨大的白色边距，而 zoom: 0.6 缩放页面上的元素，但不缩放绘制元素的页面本身。
