大屏适配方案

现有大屏实现方案：#

一、页面元素定位使用rem

定义父级大小，之后进行组件的height、margin、padding等多种css属性采用rem作为单位，实现适配

二、大屏内容居中展示

做法类似于查看图片的展示，当比例不同时，保证设计比例，内容居中展示

Copy
function setHtmlFontSize() {
            const cliW = doc.clientWidth;
            const cliH = doc.clientHeight;
            // 设计稿的尺寸：2560*1440， 比例为16/9
            const defaultW = 2560;
            const defaultH = 1440;
            // 为保证大屏完全展示，做法类似查看图片的展示，当比例不同时，保证设计比例，内容居中显示
            const widthRatio = cliW / defaultW;
            const heightRatio = cliH / defaultH;

            const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
            const fontSize = ratio * 100;
            // 将100px 作为 1rem，设计稿为 2560 * 1440
            doc.style.fontSize = `${fontSize.toFixed(3)}px`;
            that.props.dispatch({
                type: 'realTimeDynamicDisplay/overrideStateProps',
                payload: {
                    fontSize,
                },
            });
        }

缺点：对于UI组件的呈现不是很友好。因为组件的很多默认属性是以 px 为单位。如line-height的设置为22px，此时覆盖样式后的字体过大，并不能适应行高，就会出现文字重叠等错乱问题

调研方案：#

通过CSS3的缩放 transform: scale(X) 属性，来控制大屏的展示

方式：只需要监听浏览器窗口的大小，同时控制变化的比例即可。

使用库：npm install @fit-screen/react

使用函数：

Copy
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')).style.transform = `scale(${scale}) translate(-50%)`;
    };

DEMO#

Copy
import React, { useEffect } from 'react';
import styles from './index.less';

const Index = () => {
    //数据大屏自适应函数
    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')).style.transform = `scale(${scale}) translate(-50%)`;
    };
     //React的生命周期 如果你是vue可以放到mountd或created中
    useEffect(() => {
        //初始化自适应  ----在刚显示的时候就开始适配一次
        handleScreenAuto();
        //绑定自适应函数   ---防止浏览器栏变化后不再适配
        window.onresize = () => handleScreenAuto();
        //退出大屏后自适应消失   ---这是react的组件销毁生命周期，如果你是vue则写在deleted中。最好在退出大屏的时候接触自适应
        return () => window.onresize = null;
    }, []);
    return (
        <div id="screen" className={styles.stl}>
            阿莱克斯的减肥撒好地方
        </div>
    );
};

export default Index;