vue项目：大屏自适应解决方案（两种） |
您所在的位置：网站首页 › vueh5适配 › vue项目：大屏自适应解决方案（两种） |
vue项目：大屏自适应解决方案（两种）
|
css缩放方案： 利用transform：scale 进行适配
推荐使用v-scale-screen 值得注意的是： vue 2.6、2.7 要使用 npm install [email protected]vue3：要使用v-scale-screen版本 npm install [email protected]用法： 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 思否 |
【本文地址】
今日新闻 |
推荐新闻 |