基于现目前所做数据可视化项目的不同分辨率兼容需求总结以下适配几种方案供参考。 通常而言数字大屏指的是1920*1080分辨率下的电视大屏，用于图表化的展示关键数据，然而项目大部分是在笔记本上运行，演示，测试，所以不得不把小屏笔记本纳入兼容范围。。。
viewport： 视窗=浏览器窗口的宽高物理像素（设备像素）： 屏幕显示分辨率像素，每个像素可以根据操作系统设置自己的颜色 和亮度设备独立像素（dip）：密度无关像素，可以认为是计算机坐标系统中的一个点,可用于区分视网膜设备还是非视网膜设备css像素（DIPs）： 主要用在浏览器上，一般情况下，css像素称为与设备无关的像素屏幕密度： 设备表面上存在的像素数量（PPI）设备像素比(dpr): 定义了物理像素和设备独立像素的对应关系，设备像素比=物理像素/设备独立像素熟悉移动端的自适应方案的朋友对 rem 适应方案，肯定不陌生，最出名的就是阿里的 手淘lib-flexible 方案。
html{
font-size:20px;
}
test1 {
width: 1.4rem; //1.4 × 20px = 28px
}
test2 {
height: 2.4rem; //2.4 × 20px = 48px
}
在采用rem作为适配方案时，避免不了将设计稿中的px单位转化为rem单位，开发过程中如果每个值都手动计算免不了麻烦，通常作法：
- 使用scss或less 函数进行计算
- webpack结合postcss-px2rem自动计算
npm i postcss-plugin-px2rem -D
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 100, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
unitPrecision: 5, //允许REM单位增长到的十进制数字。
propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: [], //要忽略并保留为px的选择器
ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
},
问题1：比例不是16:9的问题？
- 当屏幕比16:9 宽时，两侧留白
- 当屏幕比16:9 高时，上下留白【这种少见】
通常做法：
我们将pc宽度 screenWidth 分为10等份，其中1等分的值作为html的font-size值，以1920*1080分辨率为基准设置px2rem的rootValue则为192。这种方式有如下2个特点：
- 所有长度的比例必然和设计图一致。
- 实际的显示长度完全由 html 的 font-size 值决定（线性关系）
问题2：以上的做法，在16:9的内容窗口中可以做到适配，但当窗口不是16:9时就会出现滚动条，于是我们针对问题1的做法则是当非16:9时，根据超出比例的那一边，对rem对应fontSize进行缩放，
1.1 具体如下：
x ，计算 rem 值的基准为z，那么 css 里，A 的长度表示为
x
z
(
r
e
m
)
\frac{x}{z}(rem)
zx(rem)
font-size值为
F
s
F_s
Fs
x, z是固定的值，因而其长度根据页面运行时网页html的font-size大小而线性变化， 如在1920的设计宽度下，长100px的线，设计算rem的基准值是192（宽除以10），那么在1366分辨率下html的root-size为136.6, 则100px的线实际长度为100*136.6 / 192 (px)1.2 进一步：
1. 取计算rem值的基准是设计稿宽度的 1/q，假设设计稿宽度为ax, 高度为ay, 则计算rem的基准值z为
a
x
q
\frac{ax}{q}
qax
2. 按上面公式可以得出浏览器中画布实际的宽，高分别为：
宽
度
：
a
x
F
s
a
x
q
=
F
s
q
宽度： \frac{axF_s}{\frac{ax}{q}} = F_sq
宽度：qaxaxFs=Fsq
高
度
：
a
y
F
s
a
x
q
=
q
y
F
s
x
高度： \frac{ayF_s}{\frac{ax}{q}} = \frac{qyF_s}{x}
高度：qaxayFs=xqyFs
3. 浏览器窗口的宽度 w 要等于画布实际的宽度，即
w
=
F
s
q
由
此
推
导
F
s
=
w
q
w=F_sq 由此推导 F_s = \frac{w}{q}
w=Fsq由此推导Fs=qw
1.3 再进一步： 不同宽高比下如何设置Fs值？
h , 设缩小比例为S, 则根据1.2中2的公式得出，
h
=
q
y
F
s
x
S
h=\frac{qyF_s}{x}S
h=xqyFsS即
S
=
x
h
q
y
F
s
S=\frac{xh}{qyF_s}
S=qyFsxh
Fs的值，代入以上公式可知*综上：假设设计稿为1920*1080其计算rem的基准值为192px (默认取宽度10等分)，浏览器实际窗口为1920 * 937时rem的基准值则为 192*S，即最终html的fontSize值为166.57px
最终方案：
;(function (designWidth, minWidth) {
let docEle = document.documentElement
let screenRatioByDesign = 16/9
function setHtmlFontSize() {
var screenRatio = docEle.clientWidth / docEle.clientHeight;
var fontSize = (
screenRatio > screenRatioByDesign
? (screenRatioByDesign / screenRatio)
: 1
) * docEle.clientWidth / 10;
docEle.style.fontSize = fontSize.toFixed(3) + "px";
}
setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize)
})(1920, 1024);
module.exports = {
// ...
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 192, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
replace: false, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
},
}
rem的方案对于1920及以上分辨率屏幕来说基本适用，但当切换到1366*768等小分辨率时，由于浏览器默认最小字体为12px，所以会导致文字比理想效果更多大， 而echarts生成的canvas图中单位是以固定px写死的，也会出现超出画布的问题，因此衍生第二种方案： scale缩放
body{
width: 1920px;
height: 1080px;
}
// index.html
;(function(win){
var bodyStyle = document.createElement('style')
bodyStyle.innerHTML=`body{width:1920px; height:1080px!important;}`
document.documentElement.firstElementChild.appendChild(bodyStyle)
function refreshScale(){
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
var designWidth = 1920,
designHeight = 1080,
widthRatio = docWidth / designWidth,
heightRatio = docHeight / designHeight;
document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;`;
// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
setTimeout(function(){
var lateWidth= document.documentElement.clientWidth,
lateHeight = document.documentElement.clientHeight;
if(lateWidth===docWidth) return;
widthRatio = lateWidth/ designWidth
heightRatio = lateHeight/ designHeight
document.body.style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;"
},0)
}
refreshScale()
win.addEventListener("pageshow", function (e) {
if (e.persisted) { // 浏览器后退的时候重新计算
refreshScale()
}
}, false);
win.addEventListener("resize", refreshScale, false);
})(window)
以下demo均在浏览器窗口下展示（即非16:9情况下绘制设计16:9图稿）
在1366*768下采用rem方案能够基本适配不出现内容超出的情况（内容少时）
在1920*1080分辨率系统缩放到150%时，可以看到此时rem方案已经有缺陷，canvas内图表超出，界面字体未达到设计稿缩放效果
采用scale方案，字体不受浏览器最小字体限制，可以自由绽放到该分辨率下对应比例
由于在非16:9的情况下，默认效果是保证比例的前提下，居中两边留白，这种一些需求方觉得不好，特别是在只出了16:9的设计稿情况下，需要适配到另一个公司64:27(分辨率7680*3240)这种大屏而且要求要铺满不变形。。。
新痛点：
- UI提出在非16:9的情况下，图形不能被压缩（扁了）
- 客户提出在64:27这种宽屏下，两边不能留白太空
最后想出一个最小改动的解决方案，如下先看效果：
未优化前7680*3240 （比例64:27的宽屏）：
铺满后
最终解决方案
function refreshScale(){
let baseWidth = document.documentElement.clientWidth;
let baseHeight = document.documentElement.clientHeight;
let appStyle = document.getElementById('app').style;
let realRatio = baseWidth/baseHeight
let designRatio = 16/9
let scaleRate = baseWidth/1920
if(realRatio>designRatio){
scaleRate = baseHeight/1080
}
appStyle.transformOrigin = 'left top';
appStyle.transform=`scale(${scaleRate}) translateX(-50%)`;
appStyle.width = `${baseWidth/scaleRate}px`
}
assets/js/util