現在非常流行的大數據可視化方案，不過要做數據大屏有一個很重要的問題就是屏幕適配。

一、引入flexible文件
flexible是移動端屏幕適配非常著名的的插件，能夠幫助我們修改rem的值，也就是修改html標簽下font-size的值。
例：下載flexible.js文件并放在common目錄下，然后在vue-cli中的main.js主配置文件中引入

// 適配flex，文件放在src/common目錄下 import "@/common/flexible.js";

二、 修改文件
假設我的模板是按照1920px的尺寸來寫的，那么我們首先需要去flexible.js文件下修改它所縮放的尺寸間距如： 最小1366px，最大適配2560px，并且比例設置成24等份，設計稿是1920px，這樣1rem就是80px。

function refreshRem() {var width = docEl.getBoundingClientRect().width;// 最小1366px，最大適配2560pxif (width / dpr < 1366) {width = 1366 * dpr;} else if (width / dpr > 2560) {width = 2560 * dpr;}// 設置成24等份，設計稿時1920px的，這樣1rem就是80pxvar rem = width / 24;docEl.style.fontSize = rem + "px";flexible.rem = win.rem = rem;}

三、 借助插件自動計算rem

以vscode為例


設置比例，前面說了，我們按照1920px切成了24份，那么一份就是80px

這樣我們在寫的時候就會自動計算比例

總結

以上是生活随笔為你收集整理的解决 “数据大屏“ 展示的屏幕适配问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。