我正在参加「启航计划」

前语

您是不是有如下疑惑。

开发数据大屏不能彻底自适应？

运用rem自适应还需求注意单位很麻烦？

有没有那种随意我怎么写都能够彻底自适应的？

有没有那种用最少的代码最简略的办法完结彻底自适应？最好是不需求我用脑子去思考的那种办法。

有

运用scale适配大屏。完结数据大屏在任何分辨率的电脑上均可安然运作。无需特定编写rem单位，也不需求考虑单位运用失误导致适配不彻底。您即使全部用position去定位在其他屏幕上都不会乱。（%和px随意用）

最终作用

假如您是一位React玩家

那一切都简略了，您只需求仿制就好。

数据大屏最简略自适应计划，无需适配rem单位

代码


      /*
      JS部分
      */
       //数据大屏自适应函数
    const handleScreenAuto = () => {
        const designDraftWidth = 1920;//规划稿的宽度
        const designDraftHeight = 960;//规划稿的高度
        //依据屏幕的改变适配的份额
        const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
            (document.documentElement.clientWidth / designDraftWidth) :
            (document.documentElement.clientHeight / designDraftHeight);
        //缩放份额
        (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
    }
    //React的生命周期 假如你是vue能够放到mountd或created中
    useEffect(() => {
        //初始化自适应  ----在刚显现的时分就开端适配一次
        handleScreenAuto();
        //绑定自适应函数   ---避免浏览器栏改变后不再适配
        window.onresize = () => handleScreenAuto();
        //退出大屏后自适应消失   ---这是react的组件销毁生命周期，假如你是vue则写在deleted中。最好在退出大屏的时分触摸自适应
        return () => window.onresize = null;
    }, [])

    /*
      HTML部分
    */  
    <div className="screen-wrapper">
        <div className="screen" id="screen">
        </div>
     </div>

    /*
      CSS部分  --除了规划稿的宽高是依据您自己的规划稿决议以外，其他仿制粘贴就完事
    */  
  .screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //规划稿的宽度
        height: 960px;  //规划稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
    }
}

将上面JS部分的代码仿制到大屏的页面中，然后在id为screen中制作大屏，即可完结作用。

假如您是一位Vue玩家

也不必忧虑，由于我也准备Vue版别的。

代码↓


    /**
    js部分
    */
    mounted(){
        //初始化自适应  ----在刚显现的时分就开端适配一次
        handleScreenAuto();
        //绑定自适应函数   ---避免浏览器栏改变后不再适配
        window.onresize = () => handleScreenAuto();
    },
    deleted(){
        window.onresize = null;
    },
    methods: {
        //数据大屏自适应函数
        const handleScreenAuto = (): void => {
            const designDraftWidth = 1920;//规划稿的宽度
            const designDraftHeight = 960;//规划稿的高度
            //依据屏幕的改变适配的份额
            const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
                (document.documentElement.clientWidth / designDraftWidth) :
                (document.documentElement.clientHeight / designDraftHeight);
            //缩放份额
            (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
        }
    }

/**
    html部分
 */
 <template>
     <div className="screen-wrapper">
        <div className="screen" id="screen">
        </div>
     </div>
 </template>

    /*
      CSS部分  --除了规划稿的宽高是依据您自己的规划稿决议以外，其他仿制粘贴就完事
    */  
   <style>
         .screen-root {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;  //规划稿的宽度
        height: 960px;  //规划稿的高度
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        }
    }
   <style>

同样。将上述生命周期和methods中的代码仿制，然后在id为screen的div中编写数据大屏即可。

假如您想了解完结原理

用是会用了。有人问这个办法的完结原理咋办？

找不到人讲解这个办法为什么能够完结自适应咋办？

没关系，我来提供答案

问题是:为什么，运用以上办法能够完结自适应。

上代码，先从 handleScreenAuto 开端。

 const handleScreenAuto = () => {
        const designDraftWidth = 1920;//规划稿的宽度
        const designDraftHeight = 960;//规划稿的高度
        //依据屏幕的改变适配的份额
        const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
            (document.documentElement.clientWidth / designDraftWidth) :
            (document.documentElement.clientHeight / designDraftHeight);
        //缩放份额
        (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
    }

designDraftWidth / designDraftHeight；这两个特点，叫做:规划稿宽高。望文生义:便是规划师给咱们出的那个规划稿是按照什么宽高份额出的规划图。换言之，咱们制作视图的时分，得有个固定的宽高值。

比方我用的蓝湖。就有标注，规划师给出的规划稿是按照什么宽高份额制作的图形。

数据大屏最简略自适应计划，无需适配rem单位

现在假设宽为1920高为960的情况下，我开端制作大屏。

下面就需求解释 scale 特点是干啥的。

scale英文直译:份额。

对，这个特点便是决议，当我当时的屏幕巨细和规划稿巨细不符合的时分。我需求进行缩放的份额是多少。

举个比方。假如咱们的自己屏幕巨细是1920 * 960,全用px(像素单位) 去制作。那么当咱们的大屏呈现在1440 * 900的屏幕上的时分，咱们的大屏，就无法彻底的展现。

比方：我把自适应作用去掉。咱们看看成果（以下是在1440*900且无自适应的情况下的大屏，显然，它没有彻底显现）

数据大屏最简略自适应计划，无需适配rem单位

其实很简略，1440 * 900的像素无法显现1920*960的一切像素。

既然1440 * 900 的情况下无法显现1920 * 960 的像素，那么缩放它，不就能够显现了吗？

如何计算缩放份额，这便是scale的用处了。

    const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
                (document.documentElement.clientWidth / designDraftWidth) :
                (document.documentElement.clientHeight / designDraftHeight);

不难看懂。

scale便是拿出 当时的电脑屏幕宽度像素（1440）除以当时屏幕高度像素（900） 去和咱们的规划稿宽度像素（1920）除以规划稿高度（960）做一个比较。

假如当时屏幕份额<规划稿份额。那么咱们需求缩放的份额便是屏幕宽度除以规划稿宽度

假如当时屏幕份额>规划稿份额。那么咱们需求缩放的份额便是屏幕高度除以规划稿高度

那么 1440/900 = 1.6 。 1920/960 = 2

由于1.6 < 2。 （当时屏幕份额小于规划稿份额）

所以咱们需求缩放的份额是:屏幕宽度除以规划稿宽度 = 1440/1920 = 0.75。

回到刚才的问题，1920 * 960 的像素无法在1440 * 900像素中彻底显现的原因是 1440 * 900无法彻底展现超过本身的像素点。那么，咱们只需求将当时视图整体✖咱们刚刚算出来的缩放份额（0.75）。就能够让1440 * 900的屏幕去包容咱们的大屏了。

1920 * 0.75 === 1440；960 * 0.75 = 720。

经过缩放以后，本来1920 * 960 的大屏就能够在1440 * 900中展现。

值得注意的是，在退出大屏的时分，最好执行一下 window.onresize = null。由于这种自适应首要是为数据大屏准备的。它并不适一切场景。假如是项目的其他内容需求自适应（比方表格表单页）。我更建议您运用栅格化系统。

您是否需求一个完好的demo?

demo作用

html —- react/vue通用

/*
html
*/
 <div className="screen-wrapper">
        <div className="screen" id="screen">
            <div className="demo-root">
                <header>头部</header>
                <main>
                    <div className="demo-left"></div>
                    <div className="demo-center"></div>
                    <div className="demo-right"></div>
                </main>
                <footer>底部</footer>
            </div>
        </div>
        <footer className="large-footer"></footer>
    </div>

css部分 —react/vue通用

/*
css
*/
.screen-wrapper {
    height: 100%;
    width: 100%;
    .screen {
        display: inline-block;
        width: 1920px;
        height: 960px;
        transform-origin: 0 0;
        position: absolute;
        left: 50%;
        .demo-root{
            header{
                width: 1920px;
                height: 200px;
                background: rgba(53, 150, 206, 0.3);
                font-size: 40px;
                text-align: center;
                line-height: 200px;
            }
            main{
                display: flex;
                height: 660px;
                div{
                    width: 640px;
                    height: 100%;
                }
                .demo-left{
                    background: rgba(206, 52, 154, 0.3);
                }
                .demo-center{
                    background: rgba(13, 30, 179, 0.3);
                }
                .demo-right{
                    background: rgba(64, 163, 6, 0.849);
                }
            }
            footer{
                width: 100%;
                height: 100px;
                font-size: 40px;
                text-align: center;
                line-height: 100px;
                background: rgba(19, 211, 115, 0.3);
            }
        }
    }
}

js部分 —react

    /*
        js  ---react
    */
       //数据大屏自适应函数
    const handleScreenAuto = (): void => {
        const designDraftWidth = 1920;//规划稿的宽度
        const designDraftHeight = 960;//规划稿的高度
        //依据屏幕的改变适配的份额
        const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
            (document.documentElement.clientWidth / designDraftWidth) :
            (document.documentElement.clientHeight / designDraftHeight);
        //缩放份额
        (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
    }
    //React的生命周期 假如你是vue能够放到mountd或created中
    useEffect(() => {
        //初始化自适应  ----在刚显现的时分就开端适配一次
        handleScreenAuto();
        //绑定自适应函数   ---避免浏览器栏改变后不再适配
        window.onresize = () => handleScreenAuto();
        //退出大屏后自适应消失   ---这是react的组件销毁生命周期，假如你是vue则写在deleted中。最好在退出大屏的时分触摸自适应
        return () => window.onresize = null;
    }, [])

js部分 —vue

     /*
        js  ---vue
    */
      mounted(){
        //初始化自适应  ----在刚显现的时分就开端适配一次
        handleScreenAuto();
        //绑定自适应函数   ---避免浏览器栏改变后不再适配
        window.onresize = () => handleScreenAuto();
    },
    deleted(){
        window.onresize = null;
    },
    methods: {
        //数据大屏自适应函数
        const handleScreenAuto = (): void => {
            const designDraftWidth = 1920;//规划稿的宽度
            const designDraftHeight = 960;//规划稿的高度
            //依据屏幕的改变适配的份额
            const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
                (document.documentElement.clientWidth / designDraftWidth) :
                (document.documentElement.clientHeight / designDraftHeight);
            //缩放份额
            (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
        }
    }

END;

数据大屏最简略自适应计划，无需适配rem单位

追加，您是否忧虑，这其中会不会有什么坑？

我能够很负责任的告诉您:有;

首要存在两个问题

  1. 当缩放份额过大时分，字体会有一点点含糊，就一点点。
  2. 当缩放份额过大时分，事情热区会偏移。

请不要太忧虑,第一个问题他只有在缩放真的很极点情况下才会呈现那种让人难以承受的含糊。

数据大屏最简略自适应计划，无需适配rem单位

一般情况下,在画圈这部分的分辨率下都是没什么大问题的。假如是公司内部运用的大屏，对UI真的没有苛刻到必定的程度，这个办法放心大胆用，没有关系的。

第二个问题，他的呈现条件甚至比第一个问题还极点一点。仅仅从日常运用的角度来说，是没问题的。 emmmmm…至少到现在为止还没有客户和我反响过这个问题。

毕竟现在市场上几乎没有1280的显现器了。所以，不要太忧虑。