前端大屏幕项目大厂解决兼容问题（react）

想必近几年前端的数据可视化越来越重要了，很多甲方爸爸都喜欢那种炫酷的大屏幕设计，类似如下这种：

随便找的.jpg

遇到的这样的项目，二话不说，echarts或者antv，再搭配各种mvvm框架（react，vue），找二次封装过的组件，然后开始埋头开始写了，写着写着你会发现，如何适配不同屏幕呢？css媒体查询吧，用vw吧，哪个好点呢。其实写到最后，我觉得都不好

对于这种拿不定主意的情况呢，最好还是参考大厂的做法，于是去找了网易有数，百度suger等，他们是如何写这样的页面的
提供2个他们的案例链接：
百度
网易有数
仔细观察他们都采用了css3的缩放transform: scale(X)属性，看到这是不是有种豁然开朗的感觉
于是我们只要监听浏览器的窗口大小，然后控制变化的比例就好了
以React的写法为例

getScale=() => {// 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改const {width=1920, height=1080} = this.propslet ww=window.innerWidth/widthlet wh=window.innerHeight/heightreturn ww<wh?ww: wh
}
setScale = debounce(() => {// 获取到缩放比，设置它let scale=this.getScale()this.setState({ scale })
}, 500)

监听window的resize事件最好加个节流函数debounce

window.addEventListener('resize', this.setScale)

然后一个简单的组件就封装好了

import React, { Component } from 'react';
import debounce from 'lodash.debounce'
import s from './index.less'class Comp extends Component{constructor(p) {super(p)this.state={scale: this.getScale()}}componentDidMount() {window.addEventListener('resize', this.setScale)}getScale=() => {const {width=1920, height=1080} = this.propslet ww=window.innerWidth/widthlet wh=window.innerHeight/heightreturn ww<wh?ww: wh}setScale = debounce(() => {let scale=this.getScale()this.setState({ scale })}, 500)render() {const {width=1920, height=1080, children} = this.propsconst {scale} = this.statereturn(<divclassName={s['scale-box']}style={{transform: `scale(${scale}) translate(-50%, -50%)`,WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,width,height}}>{children}</div>)}componentWillUnmount() {window.removeEventListener('resize', this.setScale)}
}export default Comp

.scale-box{transform-origin: 0 0;position: absolute;left: 50%;top: 50%;transition: 0.3s;
}

只要把页面放在这个组件中，就能实现跟大厂们类似的效果。这种方式下不管屏幕有多大，分辨率有多高，只要屏幕的比例跟你定的比例一致，都能呈现出完美效果。而且开发过程中，样式的单位也可以直接用px，省去了转换的烦恼~~~
注：图表插件bizcharts在css缩放下会有鼠标移入时像素偏移的bug，由于是基于antv的，这主要是antv的bug，我写这篇文章的时候官方还未修复这个bug，echarts没有这个bug。
最后附上npm链接：https://www.npmjs.com/package/react-scale-box

前端大屏幕项目大厂解决兼容问题（react）相关推荐

前端大屏幕项目的一点思考
想必近几年前端的数据可视化越来越重要了,很多甲方爸爸都喜欢那种炫酷的大屏幕设计,类似如下这种: 遇到的这样的项目,二话不说,echarts 或者 antv,再搭配各种 mvvm 框架(react,vu ...
前端趋势榜：上周最有意思、又实用的 10 大 Web 项目 - 210924
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 平时如何发现好的开源项目,可以看看这篇文章:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目 1. Thief Thief ...
猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！
https://risingstars.js.org/2019/en 大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 关于猫哥,大家可以看看我的年终总结前端工程师的 2020 年 ...
【前端大屏可视化项目适配方案】
引自 https://juejin.cn/post/7009081081760579591#heading-27 感谢!!! 前端大屏可视化项目适配方案 1. 全局适配 1.1 css scale 适 ...
如何导入别人的android studio项目，解决gradle版本不兼容问题
如何导入别人的android studio项目,解决gradle版本不兼容问题参考文章: (1)如何导入别人的android studio项目,解决gradle版本不兼容问题 (2)https:// ...
大屏项目屏幕分辨率适配
一.大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160 二.css方案选择:css的宽高以什么为单位? 1.字体大小以 "相对单 ...
开源前端脚本错误监控及跟踪解决项目BadJS试用
摘要: 试用BadJS. 原文:开源前端脚本错误监控及跟踪解决项目-BadJS 试用作者:过错 Fundebug经授权转载,版权归原作者所有. BadJS 是一个web 前端脚本错误监控及跟踪项目 ...
【大数据】9大实战项目解决你所有烦恼（写论文、找工作）
你还在为"网上资料多而杂,不系统,不连贯,非常浪费时间"而烦恼么? 你还在为"学习碰到问题无人辅导,问题积累长期不解决,打击学习信心"而烦恼么? 你还在为&qu ...
9个项目助你在2020年成为前端大神！
DEV的年度热文,读完觉得不错,所以翻译出来供大家参考,个人水平有限,文中可能会有一些翻译错误,可以在评论区指正. 本篇文章一共涉及了9个流行的框架/库,没有具体的介绍使用方法,而是给了一些非常棒的实 ...
run `npm fund` for details解决，前端开发：项目运行npm install 提示XXX ...for funding run `npm fund`...的解决方法
run npm fund for details解决,前端开发:项目运行npm install 提示XXX -for funding run npm fund-的解决方法 35 packages ar ...

前端大屏幕项目大厂解决兼容问题（react）

前端大屏幕项目大厂解决兼容问题（react）相关推荐

最新文章

热门文章