vue 项目的屏幕自适应方案
方案一:使用 scale-box 组件
属性:
width
宽度 默认1920
height
高度 默认1080
bgc
背景颜色 默认"transparent"
delay
自适应缩放防抖延迟时间(ms) 默认100
vue2版本:vue2大屏适配缩放组件(vue2-scale-box - npm)
npm install vue2-scale-box
或者
yarn add vue2-scale-box
使用方法:
<template><div><scale-box :width="1920" :height="1080" bgc="transparent" :delay="100"><router-view /></scale-box></div>
</template><script>
import ScaleBox from "vue2-scale-box";export default {components: { ScaleBox },
};
</script><style lang="scss">
body {margin: 0;padding: 0;background: url("@/assets/bg.jpg");
}
</style>
vue3版本:vue3大屏适配缩放组件(vue3-scale-box - npm)
npm install vue3-scale-box
或者
yarn add vue3-scale-box
使用方法:
<template><ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100"><router-view /></ScaleBox>
</template><script>
import ScaleBox from "vue3-scale-box";
</script><style lang="scss">
body {margin: 0;padding: 0;background: url("@/assets/bg.jpg");
}
</style>
方案二:设置设备像素比例(设备像素比)
在项目的 utils 下新建 devicePixelRatio.js 文件
class devicePixelRatio {/* 获取系统类型 */getSystem() {const agent = navigator.userAgent.toLowerCase();const isMac = /macintosh|mac os x/i.test(navigator.userAgent);if (isMac) return false;// 目前只针对 win 处理,其它系统暂无该情况,需要则继续在此添加即可if (agent.indexOf("windows") >= 0) return true;}/* 监听方法兼容写法 */addHandler(element, type, handler) {if (element.addEventListener) {element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent("on" + type, handler);} else {element["on" + type] = handler;}}/* 校正浏览器缩放比例 */correct() {// 页面devicePixelRatio(设备像素比例)变化后,计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化document.getElementsByTagName("body")[0].style.zoom =1 / window.devicePixelRatio;}/* 监听页面缩放 */watch() {const that = this;// 注意: 这个方法是解决全局有两个window.resizethat.addHandler(window, "resize", function () {that.correct(); // 重新校正浏览器缩放比例});}/* 初始化页面比例 */init() {const that = this;// 判断设备,只在 win 系统下校正浏览器缩放比例if (that.getSystem()) {that.correct(); // 校正浏览器缩放比例that.watch(); // 监听页面缩放}}
}
export default devicePixelRatio;
在 App.vue 中引入并使用即可
<template><div><router-view /></div>
</template><script>
import devPixelRatio from "@/utils/devicePixelRatio.js";export default {created() {new devPixelRatio().init(); // 初始化页面比例},
};
</script><style lang="scss">
body {margin: 0;padding: 0;
}
</style>
方案三:通过 JS 设置 zoom 属性调整缩放比例
在项目的 utils 下新建 monitorZoom.js 文件
export const monitorZoom = () => {let ratio = 0,screen = window.screen,ua = navigator.userAgent.toLowerCase();if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio;} else if (~ua.indexOf("msie")) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI;}} else if (window.outerWidth !== undefined &&window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth;}if (ratio) {ratio = Math.round(ratio * 100);}return ratio;
};
在 main.js 中引入并使用即可
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {document.body.style.zoom = 100 / Number(m);
}
完整代码
import Vue from "vue";
import App from "./App.vue";
import router from "./router";/* 调整缩放比例 start */
import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {document.body.style.zoom = 100 / Number(m);
}
/* 调整缩放比例 end */Vue.config.productionTip = false;new Vue({router,render: (h) => h(App),
}).$mount("#app");
获取屏幕的分辨率
获取屏幕的宽:
window.screen.width * window.devicePixelRatio
获取屏幕的高:
window.screen.height * window.devicePixelRatio
移动端适配(使用 postcss-px-to-viewport 插件)
官网:https://github.com/evrone/postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
或者
yarn add -D postcss-px-to-viewport
配置适配插件的参数(在项目根目录创建 .postcssrc.js 文件[与 src 目录平级])粘贴以下代码即可
module.exports = {plugins: {autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等"postcss-px-to-viewport": {unitToConvert: "px", // 需要转换的单位,默认为"px"viewportWidth: 390, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度,即小数点位数propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vwselectorBlackList: ["wrap"], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换mediaQuery: false, // 是否在媒体查询的css代码中也进行转换,默认falsereplace: true, // 是否直接更换属性值,而不添加备用属性exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,用正则做目录名匹配,例如 'node_modules' 下的文件landscape: false, // 是否处理横屏情况landscapeUnit: "vw", // 横屏时使用的视窗单位,默认vwlandscapeWidth: 2048 // 横屏时使用的视口宽度}}
};
vue 项目的屏幕自适应方案相关推荐
- vue项目实现屏幕自适应
一.安装插件 npm i lib-flexible -S 下载淘宝的flexible插件,-S为生产依赖 npm i px2rem-loader -D 下载将px转换成rem的插件,这样在写的时候就可 ...
- Vue项目pc端适配方案(scss)
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
- 前端Vue项目打包性能优化方案
文章目录 一.前言 二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件 三.工具推荐 可视化分析包大小 总结 一 ...
- vue项目中字体自适应屏幕(使用px2rem插件)
1.为什么使用rem做适配? 答:当你使用px做单位的时候,在不通分辨率的手机型号,他显示的大小就是设定的多少px,当手机尺寸大时,那么元素就会显得很小,当手机分辨率过小时,元素就会显得很大,因为我们 ...
- vue中移动端自适应方案
方案1: 直接引入js (自己 写的动态改变fontsize的js) function htRem() {var ww = document.documentElement.clientWidth; ...
- 今日头条屏幕适配方案终极版正式发布!
原文地址: juejin.im/post/5bce68- 以下是 骚年你的屏幕适配方式该升级了! 系列文章,欢迎转发以及分享: 骚年你的屏幕适配方式该升级了!(一)-今日头条适配方案 骚年你的屏幕适配 ...
- android 最新头条适配,今日头条屏幕适配方案终极版正式发布!
以下是 骚年你的屏幕适配方式该升级了! 系列文章,欢迎转发以及分享: 前言 我在前面两篇文章中详细介绍了 今日头条适配方案 和 SmallestWidth 限定符适配方案 的原理,并验证了它们的可行性 ...
- vue项目PC端屏幕分辨率与窗口大小自适应
效果 #mermaid-svg-O0n9N0Pq5xuLBK3e .label{font-family:'trebuchet ms', verdana, arial;font-family:var(- ...
- vue项目登录页背景图百分百铺满屏幕宽高自适应
vue项目背景图百分百铺满屏幕宽高自适应 .login{background: url(../../../static/img/login/beijing@2x.png);background-siz ...
最新文章
- 是什么让 Spring5 放弃了使用 Guava Cache?
- [转]pragma comment的使用
- apache加入chkconfig
- Fortinet 荣膺谷歌云年度安全技术合作伙伴奖
- 在java中对null的理解
- Vivado时序报告名词解释
- SEO:避免关键词内部竞争带来的无法收录问题,
- 4款最好的Android设备HTML编辑器
- taptap APP端 产品体验的一点分析报告
- Linux网络流量监控
- Web前端之HTML+CSS的知识总结
- 固态硬盘和m.2固态硬盘有什么区别?
- ICMP重定向(ICMP redirect)实验分析
- 贪吃蛇c语言中加速怎么写,刚学C语言,想写一个贪吃蛇的代码
- 电能质量监测装置及系统
- Directx11进阶教程PBR(3)之IBL
- 微信小程序-人脸识别+输出人脸匹配信息
- web服务器的相关配置
- 【Houdini19】下载安装教程,已成功
- 说人话,人话,汉明码(海明码、hamming code)通俗易懂的解释,说人话。
热门文章
- 【linux tcp抓包之三次握手】
- python-docx add_section 分栏不换页
- proteus常用元件图示和名称(持续更新...)
- 软工个人作业 -- 提问回顾与个人总结
- ASEMI代理英飞凌TLE4250-2G汽车级线性稳压器
- linux+多个字符分割字符串数组中,String的split()方法可以将字符串按照特定的分隔符拆分成字符串数组...
- js身份证号有效性验证
- 最新版CAD都有些啥功能(上)
- APP渗透—MobSF安全评估、frida、r0capture抓包
- 编程语言1月排行榜:C是年度语言,Python增长量第二