本教程操作环境:windows10系统、Vue2&&vue3版、Dell G3电脑。vue能实现自适应吗?能。Vue屏幕自适应三种实现方法详解使用 scale-box 组件属性:width宽度 默认1920height高度
本教程操作环境:windows10系统、Vue2&&vue3版、Dell G3电脑。
vue能实现自适应吗?
能。
Vue屏幕自适应三种实现方法详解
属性:
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.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>
在项目的 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";
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);
}
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://www.PHP.cn/link/2dd6d682870e39d9927b80f8232bd276
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 // 横屏时使用的视口宽度
}
}
};
以上就是vue能实现自适应吗的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue能实现自适应吗
本文链接: https://lsjlt.com/news/206455.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0