Vue 大屏開發自適應 VScode | flexible.js | rem | echarts自適配
其實開發大屏這個適配是最費勁的，電腦的分辨率，電腦縮放比例，電腦瀏覽器縮放比例都很麻煩，當然了，大屏界面本來就對分辨率有些許的要求，太差勁的分辨率本來就不適用，因為畢竟要保持頁面放得下，不能出現滾動條，不能遮擋啥的，我這邊給的設計圖是1920*1080的，所以保證在這個分辨率下面，只要附近的分辨率和縮放不出問題就差不多了。
然后，我就從網上找了個大神的博客，抄了一下，感覺還行，啊哈哈哈哈，轉載一下，自己學習使用，不喜勿噴！
大屏自適應的核心目標有
-
字體大小隨屏幕尺寸自適應變化
-
自動撐滿全屏
-
彈性布局（使用 css 的flex布局）
重要提示：電腦開發大屏時，要使用瀏覽器全屏（按F11）查看最終效果！
使用flexible.js + rem實現字體自適應
flexible.js用於根據屏幕尺寸變化動態調整根元素的字體大小。
rem（font size of the root element）則是相對於根元素的字體大小單位。
新建flexible.js
// 來自 https://github.com/amfe/lib-flexible/blob/2.0/index.js
(function flexible(window, document) {
var docEl = document.documentElement;
// 獲取當前顯示設備的物理像素分辨率與CSS像素分辨率之比;
var dpr = window.devicePixelRatio || 1;
//根據分辨率調整全局字體大小
function setBodyFontSize() {
// html已完成加載，則立即調整字體大小，否則等待html加載完成再調整字體大小
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
// 監聽DOMContentLoaded 事件——當初始的 HTML 文檔被完全加載和解析完成之后觸發，無需等待樣式表
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// 根據屏幕寬度，重置1rem的長度為當前屏幕寬度的1/10
function setRemUnit() {
var rem = docEl.clientWidth / 10;
// 1rem的值永遠為根元素的字體大小，所以此處通過調整全局字體大小來重置rem
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// 監聽resize事件——屏幕大小發生變化時觸發
window.addEventListener("resize", setRemUnit);
// 監聽pageshow事件——顯示頁面時觸發
window.addEventListener("pageshow", function(e) {
// 若是瀏覽器中點擊后退時顯示頁面，則重置rem
if (e.persisted) {
setRemUnit();
}
});
// 檢測是否支持0.5px
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);
引入flexible.js
在需要使用的文件中引用
import "./utils/flexible.js";
將px轉換為rem
轉換規則：
rem值 = px值*10/設計圖寬度
舉例：設計圖的寬度為3840px，當前div元素的寬度384px
則轉換為rem后為 384*10/3840 = 1rem
所以轉換后頁面中css的效果如下：
.mapBox {
position: absolute;
top: 0.963542rem /* 370/384 */;
height: 3.125rem /* 1200/384 */;
width: 5.208333rem /* 2000/384 */;
left: 50%;
transform: translate(-50%, 0);
}
如此復雜的計算，當然有神器相助！
vscode 中 px2rem 插件自動計算 rem
px2rem 是一個很棒的插件，可以將 px 自動計算成需要的 rem。
下載安裝px2rem插件
設置px2rem插件的轉換系數
重啟vscode
安裝設置完這個插件之后，需要重啟 VScode 才能生效。
使用px2rem插件
在大屏頁面中，輸入px時，會自動幫你計算對應的rem值。
注釋 /* 12/384 */ 里面，前面的 12 是px的值，384是轉換系數。
echarts自適配
rem如此強大，但echarts默認使用的px為單位，且不能在echarts配置中攜帶rem單位，怎么辦？
其實很簡單。
添加fontSize函數
在圖表配置的頁面添加下方的轉換函數，其中3840為設計稿的寬度，記得根據實際情況修改！
function fontSize(res) {
let docEl = document.documentElement,
clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
if (!clientWidth) return;
// 此處的3840 為設計稿的寬度，記得修改！
let fontSize = clientWidth / 3840;
return res * fontSize;
}
使用fontSize函數實現轉換
所有圖表配置中涉及尺寸的數據，都要用fontSize進行轉換，包括定位、字體大小、寬度、內外邊距……
此時無需任何計算，只需用fontSize()包裹原數據即可，fontSize函數會幫你完成適配！
legend: [
{
data: ["人數"],
top: fontSize(10),
right: fontSize(320),
itemWidth: fontSize(14),
textStyle: {
color: "#fff",
fontSize: fontSize(20),
},
},
記得監聽屏幕尺寸變化事件，及時重繪圖表
import echarts from "echarts";
let option = {…… 圖表配置 ……}
let chart = echarts.init(this.$refs.myChart);
chart.setOption(option);
// 添加窗口大小改變監聽事件，當窗口大小改變時，圖表會重新繪制，自適應窗口大小
window.addEventListener("resize", function() {
chart.resize();
});
完成！