响应式数据大屏构造

数据大屏构建

需求

UI: 实现响应式数据大屏，适配各种屏幕，不允许出现滚动条

方案

1. rem：

   实现原理： 根据屏幕宽度，计算1rem的宽度，配置根元素的font-size,所有的像素单位按照rem计算

   优点：实现响应式，根据设计稿和VW的宽度实现界面宽度百分百展示

   缺点： 在非设计稿比例的屏幕下，会出现滚动条

2. 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
}