vue项目屏幕自适应(有大屏)
目前做项目都是基于1920*1080窗口大小有的要求屏幕自适应我一直这样子做,挺简单的,今天分享给大家第一步安装一个包只在开发环境需要第二步在vue.config.js文件中加入以下内容(没有就创建一个,与src目录同级)module.exports={css:{extract:false,//false表示开发环境,true表示生成环境sourceMap:false,loaderOptions.
一:后台相关网站
目前做项目都是基于1920*1080窗口大小
有的要求屏幕自适应
我一直这样子做,挺简单的,今天分享给大家
第一步安装一个包
只在开发环境需要
第二步
在vue.config.js文件中加入以下内容(没有就创建一个,与src目录同级)
module.exports={
css: {
extract: false,//false表示开发环境,true表示生成环境
sourceMap: false,
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px", // 需要转换的单位,默认为"px"
viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度,一般是1920
viewportHeight: 1080,// 视窗的高度,对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080
unitPrecision: 3, // 单位转换后保留的精度
propList: [ // 能转化为vw的属性列表
"*"
],
viewportUnit: "vw", // 希望使用的视口单位
fontViewportUnit: "vw", // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值,而不添加备用属性
exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
})
]
}
}
}
}
然后重新启动项目
就ok了,f12查看,单位就变成vm了
缺点(只能转化style标签里的)
二:大屏显示自适应
大屏显示的话,就要根据客户屏幕占满整个屏幕,而且布局不能乱
这里采用公司前辈给的办法:css的transform: scale()可用
ui给的设计稿是1920*1080但是这是一个大屏项目(只显示数据,没其他操作)
先按1920*1080把整个项目写好
在最外层组件,类似app组件,添加css属性
废话不多说,上代码
<template>
<div class="wrap" ref="wrap">
<div class="ScaleBox" ref="ScaleBox">
<router-view />
</div>
</div>
</template>
<script>
export default {
name: "ScaleBox",
data() {
return {
scale: null,
width: 1920,
height: 1080,
heightValue: 1080,
widthValue: 1920,
};
},
mounted() {
// console.log(this);
this.setScale();
window.addEventListener("resize", this.setScale);
},
methods: {
getScale() {
const { width, height } = this;
// console.log(window.innerWidth,window.innerHeight);
let ww = window.innerWidth / width;
let wh = window.innerHeight / height;
// console.log(ww,"设备比1920");
// console.log(document.documentElement.clientWidth,"设备");
return ww < wh ? wh : ww;
// return ww
},
setScale() {
this.scale = this.getScale();
this.$refs.ScaleBox.style.setProperty("--scale", this.scale); //设置指定键值对系统属性
this.$refs.wrap.style.setProperty(
"--heightValue",
(this.scale * this.heightValue + 'px')
// this.scale * this.heightValue
);
this.$refs.wrap.style.setProperty(
"--widthValue",
(this.scale * this.widthValue +'px')
);
},
},
};
</script>
<style lang="less" scoped>
#ScaleBox {
--scale: 1;
}
.wrap {
width: var(--widthValue);
height: var(--heightValue);
background-color: #03304a;
overflow: hidden;
}
.ScaleBox {
width: 100%;
height: 100%;
transform: scale(var(--scale));
transform-origin: 0 0;
}
</style>
<style>
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
</style>
就是获取浏览器窗口大小,获得比例,(一般都是要宽度比例,让宽度100%占满)把整个组件进行缩放
最新修改
<template>
<div class="app-wrap" ref="appWrapRef">
<div class="scale-box" ref="scaleBoxRef">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const width = ref(1920)
const height = ref(1080)
const appWrapRef = ref(null)
const scaleBoxRef = ref(null)
onMounted(() => {
setScale()
window.onresize = () => setScale()
})
function getScale() {
let ww = window.innerWidth / width.value
let wh = window.innerHeight / height.value
console.log('window.innerWidth:', window.innerWidth, 'window.innerHeight:', window.innerHeight)
console.log('ww:', ww, 'wh:', wh)
return ww < wh ? ww : wh
// return ww
}
function setScale() {
let scale = getScale()
scaleBoxRef.value.style.setProperty('transform', ` scale(${scale}) translate(-50%, -50%) `) //设置指定键值对系统属
}
</script>
<style lang="scss" scoped>
.app-wrap {
position: relative;
width: 100vw;
height: 100vh;
background-color: #021227;
overflow: hidden;
.scale-box {
width: 1920px;
height: 1080px;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 0 0;
}
}
</style>
更多推荐
所有评论(0)