可視化大屏適配/自適應(yīng)現(xiàn)狀
三大常用方式
vw/vh方案
概述：按照設(shè)計稿的尺寸，將px按比例計算轉(zhuǎn)為vw和vh
優(yōu)點(diǎn)：可以動態(tài)計算圖表的寬高，字體等，靈活性較高，當(dāng)屏幕比例跟 ui 稿不一致時，不會出現(xiàn)兩邊留白情況
缺點(diǎn)：每個圖表都需要單獨(dú)做字體、間距、位移的適配，比較麻煩
scale方案
概述：也是目前效果最好的一個方案
優(yōu)點(diǎn)：代碼量少，適配簡單 、一次處理后不需要在各個圖表中再去單獨(dú)適配.
缺點(diǎn)：留白，據(jù)說有事件熱區(qū)偏移，但是我目前沒有發(fā)現(xiàn)有這個問題，即使是地圖也沒有
rem + vw vh方案
概述：這名字一聽就麻煩，具體方法為獲得 rem 的基準(zhǔn)值 ，動態(tài)的計算html根元素的font-size ，圖表中通過 vw vh 動態(tài)計算字體、間距、位移等
優(yōu)點(diǎn)：布局的自適應(yīng)代碼量少，適配簡單
缺點(diǎn)：留白，有時圖表需要單獨(dú)適配字體
clientHeight / scale 就等于我們需要的高度！
我們用代碼試一試文章來源：http://www.zghlxwxcb.cn/news/detail-558525.html
function keepFit(designWidth, designHeight, renderDom) {
let clientHeight = document.documentElement.clientHeight;
let clientWidth = document.documentElement.clientWidth;
let scale = 1;
if (clientWidth / clientHeight < designWidth / designHeight) {
scale = (clientWidth / designWidth)
document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
} else {
scale = (clientHeight / designHeight)
document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
}
document.querySelector(renderDom).style.transform = `scale(${scale})`;
}
上面的代碼參數(shù)分別是：設(shè)計稿的寬高和你要適配的元素，在vue中可以直接傳#app。
下面的if判斷的是寬度固定還是高度固定，當(dāng)屏幕寬高比小于設(shè)計寬高比時，
我們把高度寫成 clientHeight / scale ，寬度也是同理。文章來源地址http://www.zghlxwxcb.cn/news/detail-558525.html
到了這里，關(guān)于前端可視化大屏適配/自適應(yīng)三種實現(xiàn)方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
