数据大屏构建
需求
UI: 实现响应式数据大屏,适配各种屏幕,不允许出现滚动条
方案
-
rem:
实现原理: 根据屏幕宽度,计算1rem的宽度,配置根元素的font-size,所有的像素单位按照rem计算
优点:实现响应式,根据设计稿和
VW
的宽度实现界面宽度百分百展示缺点: 在非设计稿比例的屏幕下,会出现滚动条
-
scale
实现原理: 将设计稿按照比例放大或缩小,在不出现滚动条的情况下,放大至最大展示
优点:响应式缩放,没有滚动条,不需要转化单位,按照设计稿一比一开发
缺点: 对于部分像素偏小的单位,缩小后模糊
目前开发采用的是 scale 方案 参考 电商618数据大屏
代码实现
react
获取最佳响应缩放比例
import debounce from 'loadsh.debounce'
getScale = () => {
const {width =1920,height=1080} = this.props
const ww = window.inndeWidth/width
const wh = window.innerHeight/height
return ww<wh?ww:wh
}
// 可以采用debounce或者自定义一个定时器
setScale = debounce(() => {
const scale = this.getScale()
this.setState({ scale })
},500)
监听屏幕尺寸改变
componDidMount = () =>{
window.addEventLister("resize,this.setScale)
}
render
render(){
const {width=1920,height=1080,children} = this.props
return(
<div className={{styles.wrap}}>
<div style={{
transform:`scale(${scale},${scale}},
transform:`scale(${scale},${scale}},
width,
height
}}>
{{children}}
</div>
</div>
)
}
// css自己利用定位处理一下就好了
vue
App.vue
<!-- html部分 -->
<div id="app">
<div class="container" :style="{transform:`scale(${scale},${scale}) translateX(-50%)`,width: `${width}px`,height: `${height}px`}">
<div class="main-wrap">
...
</div>
</div>
</div>
// css部分
html,body,#app{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#app{
position: relative;
.container{
position: absolute;
left: 50%;
transform-origin: 0 0;
overflow: hidden;
transition: all .3s linear;
.main-wrap{
width: 100%;
height: 100%;
}
}
}
import {getScale,width,height}from './utils/getScale'
export default {
data(){
return{
width,
height,
scale: getScale(), // 初始化时候就进行一次获取比例
timer: null // 防抖
}
},
methods:{
// 设置缩放比
setScale(){
if(this.timer){
clearTimeOut(this.timer)
this.timer = setTimeOut(()=>{
this.scale = getScale()
},500)
}
}
},
mounted(){
const that = this
window.addEventListener('resize',()=>{
that.setScale()
})
},
destoryed(){
window.removeEventListener('resize',this.setScale())
}
}
utils/getScales.js
const height = 1080 // 设计稿 height
const width = 1920 // 设计稿 width
// 获取宽高比例
const getScale = () =>{
const ww = window.innerWidth / width
const hh = window.innerHeight / height
const scale = ww < wh ? ww : wh
return scale
}