vue项目：大屏自适应解决方案（两种）(vue 大屏可视化设计 开源)

vue项目：大屏自适应解决方案（两种） css缩放方案： 利用transform：scale 进行适配

推荐整理分享vue项目：大屏自适应解决方案（两种）(vue 大屏可视化设计 开源)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue 大屏可视化设计 开源,vue bi 大屏,vue项目大屏自适应,vue大屏自适应,vue大屏可视化开发,vue项目大屏自适应,vue 大屏,vue项目大屏自适应,内容如对您有帮助，希望把文章链接给更多的朋友！

推荐使用v-scale-screen

值得注意的是：

vue 2.6、2.7 要使用

npm install v-scale-screen@1.0.2

vue3：要使用v-scale-screen版本

npm install v-scale-screen@2.0.0

用法：

<v-scale-screen width="1920" height="1080"></v-scale-screen>

Api详见： README.md · v3.0 · mirrors / Alfred-Skyblue / v-scale-screen · GitCode

rem方案

原理： 利用html的font-size变换，在移动端也经常使用此方法。

第一步

在utils目录下创建flexible.js, 复制下方代码。黏贴保存。

注意可能会有报错， 因为eslint， 使用设置好格式化插件的格式化一下就行了。

(function (win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { console.warn("将根据已有的meta标签来设置缩放比例"); var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute("content"); if (content) { var initialDpr = content.match(/initial-dpr=([d.]+)/); var maximumDpr = content.match(/maximum-dpr=([d.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { // var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } } else { // 其他设备下，仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute("data-dpr", dpr); if (!metaEl) { metaEl = doc.createElement("meta"); metaEl.setAttribute("name", "viewport"); metaEl.setAttribute( "content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no" ); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement("div"); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width / dpr > 1920) { // 这个位置划重点 1920是设计稿的大小 如果你的设计稿是750 那么就需要将1920替换成750 width = (docEl.clientWidth / 1920) * 1920; } var rem = width / 10; docEl.style.fontSize = rem + "px"; flexible.rem = win.rem = rem; } win.addEventListener( "resize", function () { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false ); win.addEventListener( "pageshow", function (e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false ); if (doc.readyState === "complete") { doc.body.style.fontSize = 12 * dpr + "px"; } else { doc.addEventListener( "DOMContentLoaded", function () { doc.body.style.fontSize = 12 * dpr + "px"; }, false ); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function (d) { var val = parseFloat(d) * this.rem; if (typeof d === "string" && d.match(/rem$/)) { val += "px"; } return val; }; flexible.px2rem = function (d) { var val = parseFloat(d) / this.rem; if (typeof d === "string" && d.match(/px$/)) { val += "rem"; } return val; };})(window, window["lib"] || (window["lib"] = {}));

在main.js中导入一下就行

import '@/utils/flexible'第二步

利用vscode插件

扩展搜索： 

 

 填写内容：

设计稿的宽度 * 0.1 = 填写的数字

1920 * 0.1 = 192

750 * 0.1 = 75

使用展示

 选择第二个选项就会自动计算出来啦

 参考链接：javascript - vue大屏自适应解决方案_个人文章 - SegmentFault 思否