大屏数据可视化——屏幕适配方案(多分辨率下)
⼤屏数据可视化——屏幕适配⽅案（多分辨率下）
⽂章⽬录
前⾔
基于现⽬前所做数据可视化项⽬的不同分辨率兼容需求总结以下适配⼏种⽅案供参考。 通常⽽⾔数字⼤屏指的是1920*1080分辨率下的电视⼤屏，⽤于图表化的展⽰关键数据，然⽽项⽬⼤部分是在笔记本上运⾏，演⽰，测试，所以不得不把⼩屏笔记本纳⼊兼容范围。。。
⼀、⼀些前提概念
1.1 常见⼤屏分辨率
1366 * 768 ： 普通液晶显⽰器
描写大自然的诗句1920 * 1080： ⾼清液晶显⽰器
2560 * 1440： 2K⾼清显⽰器
4096 * 2160： 4K⾼清显⽰器
1280 * 720： 笔记本（1920*1080分辨率下系统默认推荐150%缩放⽐产⽣的尺⼨。。。。）
1.2 设备像素
viewport： 视窗=浏览器窗⼝的宽⾼
物理像素（设备像素）： 屏幕显⽰分辨率像素，每个像素可以根据操作系统设置⾃⼰的颜⾊ 和亮度
设备独⽴像素（dip）：密度⽆关像素，可以认为是计算机坐标系统中的⼀个点，可⽤于区分视⽹膜设备还是⾮视⽹膜设备
css像素（DIPs）： 主要⽤在浏览器上，⼀般情况下，css像素称为与设备⽆关的像素
屏幕密度： 设备表⾯上存在的像素数量（PPI）
设备像素⽐(dpr): 定义了物理像素和设备独⽴像素的对应关系，设备像素⽐=物理像素/设备独⽴像素
⼆、适配痛点
1. 设计稿按照1920*1080的分辨率，16:9的⽐例设计， 实际开发中，document窗⼝不⾜16:9（⾼度减掉顶部tab及导航栏，地址栏
等）
2. 不同分辨率：实际应⽤场景中，显⽰场景不同，不能固定写死px单位
3. 不同⽐例：不同的显⽰器宽⾼⽐与设计稿不⼀致
4. 由于⼤屏数据可视化项⽬通常⽤于放在电视或⼴告屏上展⽰⽤，⽽不允许出现滚动条
三、关于rem
熟悉移动端的⾃适应⽅案的朋友对 rem 适应⽅案，肯定不陌⽣，最出名的就是阿⾥的 ⼿淘lib-flexible ⽅案。
rem (font size of the root element), 是 css3 的引⼊的⼀个⼤⼩单位。即相对于根元素的 font-size 值的⼤⼩。所谓根元素在⽹页⾥⼀般就是 html.
举例如下：
html{
font-size:20px;
}
test1 {
width: 1.4rem; //1.4 × 20px = 28px
}
test2 {
height: 2.4rem; //2.4 × 20px = 48px
}
通常如果应⽤场景只涉及16:9⽐例下，1920*1080分辨率屏幕的话，使⽤rem来⾃动计算即可实现不同⼤⼩屏幕的适配
四、关于px2rem
在采⽤rem作为适配⽅案时，避免不了将设计稿中的px单位转化为rem单位，开发过程中如果每个值都⼿动计算免不了⿇烦，通常作法：
使⽤scss或less 函数进⾏计算
webpack结合postcss-px2rem⾃动计算
postcss ⼀种对css编译的⼯具，类似babel对js的处理，通过它的插件⽣态来实现各种功能转换，如：autoprefixer(. ⾃动补全浏览器前缀), px2rem(⾃动将px转换为rem）
母亲节感恩作文这⾥对px2rem配置说明如下：
postcss-plugin-px2rem: 作为postcss的经典插件之⼀，⽤于⾃动转换px为rem
npm i postcss-plugin-px2rem -D
2. 配置fig.js
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
}),
]
}
}
},
五、适配⽅案
5.1 rem⾃适应缩放
问题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条线: A, A 的长度为 x ，计算 rem 值的基准为z，那么 css ⾥，A 的长度表⽰为 x z ( r e m )
rac{x}{z}(rem) zx(rem)
2. 设： ⽹页在不同分辨率下运⾏时html的font-size值为 F s F_s Fs
3. 那么 A 的实际显⽰长度就分为: x F s z ( p x ) rac{xF_s}{z}(px) zxFs(px)
对于任意⼀条线，其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 rac{ax}{q} qax
2. 按上⾯公式可以得出浏览器中画布实际的宽，⾼分别为：
宽 度 ： a x F s a x q = F s q 宽度： rac{axF_s}{ rac{ax}{q}} = F_sq 宽度：qaxaxFs=Fsq
⾼ 度 ： a y F s a x q = q y F s x ⾼度： rac{ayF_s}{ rac{ax}{q}} = rac{qyF_s}{x} ⾼度：qaxayFs=xqyFs
3. 浏览器窗⼝的宽度 w 要等于画布实际的宽度，即
w = F s q 由 此 推 导 F s = w q w=F_sq 由此推导 F_s = rac{w}{q} w=Fsq由此推导Fs=qw
1.3 再进⼀步： 不同宽⾼⽐下如何设置Fs值？
1. 以常见的在浏览器窗⼝中举例，浏览器中画布宽度ax与设计稿⼀致，⽽⾼度⽐设计⾼度⼩，这时我们需要将⾼度调整为浏览
器⾼度，⽽⼜严格按照设计稿的宽⾼⽐来进⾏，那么
2. 设浏览器document⾼度为h , 设缩⼩⽐例为S, 则根据_1.2中2_的公式得出， h = q y F s x S h= rac{qyF_s}{x}S
h=xqyFsS即 S = x h q y F s S= rac{xh}{qyF_s} S=qyFsxhflash 动画
3. 由_1.3中3_的公式中得出Fs的值，代⼊以上公式可知
S = x h y w 即 ： S = 设 计 稿 长 宽 ⽐ 实 际 长 宽 ⽐ S = rac{xh}{yw} 即：S= rac{设计稿长宽⽐}{实际长宽⽐} S=ywxh
即：S=实际长宽⽐设计稿长宽⽐
*综上：假设设计稿为1920*1080其计算rem的基准值为192px (默认取宽度10等分)，浏览器实际窗⼝为1920 * 937时rem的基准值则为 192*S，即最终html的fontSize值为166.57px
最终⽅案：
index.html
;(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 = Fixed(3) + "px";
}
setHtmlFontSize()
window.addEventListener(‘resize’, setHtmlFontSize)
})(1920, 1024);
// …
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
}),
]
l码是多大}烈士留言句子
}
},
}
5.2 css3缩放scale
rem的⽅案对于1920及以上分辨率屏幕来说基本适⽤，但当切换到1366*768等⼩分辨率时，由于浏览器默认最⼩字体为12px，所以会导致⽂字⽐理想效果更多⼤， ⽽echarts⽣成的canvas图中单位是以固定px写死的，也会出现超出画布的问题，因此衍⽣第⼆种⽅案： scale缩放

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。