大屏可视化适配方案

可视化需求：

1. 宽高适配：如何适配不同分辨率屏幕，保证每个div元素在不同电脑分辨率下依然显示正常比例，避免拉伸变形
2. 字体适配：通常情况下，我们会把字体写成固定的px像素值，在普通屏幕下如果不是要求特别严格，PC端通常不会考虑适配；但是在大屏模式下，固定的像素值看起来就如同在山顶看山脚下的汽车一般，极为渺小

应对方案：

方案1：css3 transform:scale()方法

• 该方法需固定屏幕宽高，适合整个项目都是大屏页面的工程，但如果是一个项目里嵌入几个大屏页面的话，不推荐此方法
• 该方法可以解决屏幕适配、字体适配的问题缩放以后四周会留有空白，如下代码可以解决空白问题

function resize() { 
    var ratioX = $(window).width() / 1920; //此处的宽高根据自己屏幕的比例修改即可 
    var ratioY = $(window).height() / 1080;
    $("body").css({ 
        transform: "scale(" + ratioX + "," + ratioY + ")", 
        transformOrigin: "left top",
        backgroundSize: "100% 100%"
    }); 
    $("html").css({'overflow':'hidden'}) 
} 
$(window, document).resize(function () { resize(); });
resize();

方案2：百分比+rem 方法

• 百分比布局不用多说，宽高都用百分比来布局就行，确保自适应；
• 本人也曾尝试过flex布局，但总会有各种奇奇怪怪的问题会把宽度撑开

rem借鉴移动端的字体适配方法，大家都知道移动端屏幕本来就很小，所以必须保证字体在不同分辨率下显示最佳大小

setRem(){ 
    var whdef = 100 / 1366; // 表示1366的设计图,使用100PX的默认值 
    var bodyWidth = document.body.clientWidth; // 当前窗口的宽度 
    var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值 
    // document.getElementsByTagName("html")[0].style.fontSize = rem + "px"; 
    document.documentElement.style.fontSize = rem + "px";
} 
mounted() { 
    this.setRem() 
    window.addEventListener("load", this.setRem());
    window.addEventListener("resize",this.setRem(),false);
}

以上就是大屏适配的两种较为简单的方法，当然还有媒体查询可以来适配，如果以上两种方法都不好使的情况下，媒体查询也不失为一个最简单有效的方法。

寄语：

今天恰逢2023年冬至～

祝：素未谋面的朋友们节日快乐！！！

岁末将至、敬颂冬绥！！！