方案一：使用 scale-box 组件
属性：
width宽度 默认1920height高度 默认1080bgc背景颜色 默认"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.resize
-
that.
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",
// 指定需要转换成的视窗单位，默认vw
-
fontViewportUnit:
"vw",
// 指定字体需要转换成的视窗单位，默认vw
-
selectorBlackList: [
"wrap"],
// 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
-
minPixelValue:
1,
// 默认值1，小于或等于1px则不进行转换
-
mediaQuery:
false,
// 是否在媒体查询的css代码中也进行转换，默认false
-
replace:
true,
// 是否直接更换属性值，而不添加备用属性
-
exclude: [
/node_modules/],
// 忽略某些文件夹下的文件或特定文件，用正则做目录名匹配，例如 'node_modules' 下的文件
-
landscape:
false,
// 是否处理横屏情况
-
landscapeUnit:
"vw",
// 横屏时使用的视窗单位，默认vw
-
landscapeWidth:
2048
// 横屏时使用的视口宽度
-
}
-
}
-
};
转载：https://blog.csdn.net/AdminGuan/article/details/127971358
查看评论