简单方法Transform等比缩放解决大屏展示屏幕分辨率的问题
简单方法Transform等比缩放解决大屏展示屏幕分辨率的问题一、为什么不用rem?二、使用transform1.transform用法2.项目中使用一、为什么不用rem?rem方案固然好,但是我司项目中的业务场景是某个页面大屏展示,rem尺寸相对于html根元素的字体大小来显示的,使用rem方案在同一个项目中不可避免的会影响到其他页面的样式。二、使用transform1.transform用法t
·
简单方法Transform等比缩放解决大屏展示屏幕分辨率的问题
一、为什么不用rem?
rem方案固然好,但是我司项目中的业务场景是某个页面大屏展示,rem尺寸相对于html根元素的字体大小来显示的,使用rem方案在同一个项目中不可避免的会影响到其他页面的样式。
二、使用transform
1.transform用法
2.项目中使用
代码如下(vue示例):
<template>
<div v-loading="loading"
:style="{
'transformOrigin':'center top',
'transform':`scale(${rate},${rate})`,
'-webkit-transform':`scale(${rate},${rate})`,
'-moz-transform':`scale(${rate},${rate})`,
'-o-transform':`scale(${rate},${rate})`,
'-ms-transform':`scale(${rate},${rate})`
}"
class="divContainer"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
这里是展示内容位置
</div>
</template>
data(){
return{
rate:1
}
},
mounted() {
this.resize_window()
window.addEventListener('resize', () => {
this.resize_window()
})
},
destroyed() {
window.removeEventListener('resize', () => {
this.resize_window()
})
},
methods: {
//在这里发送页面的请求获取大屏展示的数据
async initialize() {
try {
this.loading = true
this.$emit('pageLoading', true)
} catch (err) {
console.log(err)
} finally {
setTimeout(() => {
this.loading = false
this.$emit('pageLoading', false)
}, 3000)
}
},
resize_window() {
const heightRatio = Number(document.documentElement.clientHeight / 1080)
const widthRatio = Number(document.documentElement.clientWidth / 1920)
var ratio= document.documentElement.clientWidth /document.documentElement.clientHeight
if (ratio< 1920 / 1080) {
this.rate= widthRatio
} else {
this.rate= heightRatio
}
}
}
页面完成等比缩放以后,由于比例问题,页面两边难免出现留白的情况,此时应当设置整个页面的背景来取代空白处,做到缩放也不影响页面的整体布局。
代码如下(vue示例)App.vue:
<template>
<div id="app">
<!-- 需要定义在路由中pageFull给页面加上整体的背景色,并且对页面loading时候不一致状况做出处理 -->
<div :class="{'page-full':true,'loading':loading}" v-if="$route.meta.pageFull">
<router-view @pageLoading="pageLoading" />
</div>
<router-view v-else />
</div>
</template>
<script>
export default {
name: 'App',
components: { BackTop },
data() {
return {
loading: false
}
},
methods: {
//页面中的loading通知根节点的简单实现方式
pageLoading(val) {
this.loading = val
}
}
}
</script>
<style>
body {
margin: 0;
padding: 0;
}
#app {
font-family: 'Microsoft YaHei', Arial;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-width: 1200px;
}
/* 根节点注意样式的穿透问题 */
.page-full {
background-color: #050f43;/* 当然,使用背景图片会更加美观 */
justify-content: center;
display: flex;
box-sizing: border-box;
}
.loading {
background-color: #01030d;/* 这里设置页面loading时候的背景色 */
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)