前端可视化大屏【附源码】
一：效果展示
二：项目架构
注意：由于图片和其余配置过多，做不到全部放置，大家可以关注+私信我，我单独发给大家
三：代码分析
1. 主界面-view.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="{{ url_for('static', filename='css/view.css') }}"></head><body><!-- 头部盒子 --><header><divclass="container"><h1>碳排放可视化大屏</h1></div><divclass="showTime"></div><script>var t =null; t =setTimeout(time,1000);//開始运行functiontime(){clearTimeout(t);//清除定时器 a =newDate();var y = a.getFullYear();var mt = a.getMonth()+1;var day = a.getDate();var h = a.getHours();//获取时var m = a.getMinutes();//获取分var s = a.getSeconds();//获取秒 document.querySelector(".showTime").innerHTML ='当前时间：'+ y +"年"+ mt +"月"+ day +"-"+ h +"时"+ m +"分"+ s +"秒"; t =setTimeout(time,1000);//设定定时器，循环运行}</script></header><!-- 页面主体部分 --><sectionclass="box"><!-- 左侧盒子 --><divclass="column"><!-- 左侧柱状图模块 --><divclass="public bar right-chart-module"><divclass="chart-title"><h2></h2><divclass="chart-tabs"><buttonclass="tab-btn active"data-type="classroom">教室</button><buttonclass="tab-btn"data-type="lab">实验室</button><buttonclass="tab-btn"data-type="dormitory">宿舍</button></div></div><divclass="char"id="leftBarChart"></div><divclass="public-one"></div></div><divclass="public bar"><h2>无纸化考试次数</h2><divclass="chart-tabs"><divclass="char"id="horizontalBarChart"></div></div><divclass="public-one"></div></div></div><!-- 中间盒子 --><divclass="column"><!-- num模块 --><divclass="num"><divclass="globe-container"><canvasid="globe-canvas"></canvas></div><divclass="globe-data"><divclass="data-row"><divclass="data-item"><divclass="data-value"id="global-temp">12</div><divclass="data-label">没想好</div></div><divclass="data-item"><divclass="data-value"id="co2-level">419</div><divclass="data-label">没想好</div></div></div><divclass="data-row"><divclass="data-item"><divclass="data-value"id="china-emission">10.5</div><divclass="data-label">没想好</div></div><divclass="data-item"><divclass="data-value"id="world-emission">4.7</div><divclass="data-label">没想好</div></div></div></div></div></div><!-- 右侧盒子 --><divclass="column"><!-- 右侧柱状图模块 --><divclass="public bar right-chart-module"><divclass="chart-title"><h2></h2><divclass="chart-tabs"><buttonclass="tab-btn active"data-type="classroom">教室</button><buttonclass="tab-btn"data-type="lab">实验室</button><buttonclass="tab-btn"data-type="dormitory">宿舍</button></div></div><divclass="char"id="vehicleChart"></div><divclass="public-one"></div></div><!-- 饼图模块 --><divclass="public pie"><divclass="chart-title"><h2></h2><divclass="chart-tabs"><buttonclass="tab-btn active"data-time="morning">早</button><buttonclass="tab-btn"data-time="evening">晚</button></div></div><divclass="char"id="pieChart"></div><divclass="public-one"></div></div></div></section><scriptsrc="{{ url_for('static', filename='js/echarts.js') }}"></script><scriptsrc="{{ url_for('static', filename='js/echarts.min.js') }}"></script><scriptsrc="{{ url_for('static', filename='js/view.js') }}"></script><scriptsrc="{{ url_for('static', filename='js/flexible.js') }}"></script><scriptsrc="{{ url_for('static', filename='js/jiazai.js') }}"></script><script> document.addEventListener('DOMContentLoaded',()=>{setTimeout(()=> window.dispatchEvent(newEvent('resize')),300);});</script></body></html>2. view.css
*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}/* 声明字体*/@font-face{font-family: electronicFont;src:url(/static/font/ziti.TTF);}html{font-size: 100px;overflow: hidden;width: 100%;height: 100%;}body{font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;background:url(/static/images/bei.jpg) no-repeat;background-size: cover;background-attachment: fixed;line-height: 1.15;width: 100%;height: 100%;overflow: hidden;}header{position: relative;height: 1.11rem;background:url(/static/images/head.png) no-repeat top center;background-size: 100% 100%;width: 100%;}header .container h1{font-size: 0.51rem;color: #fff;text-align: center;line-height: 1.07rem;-webkit-text-stroke: 2px #00f7ff;text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);}header .showTime{position: absolute;right: 0.4rem;top: 0;line-height: 1rem;color: #2680ce;font-size: 0.27rem;font-family:'electronicFont';white-space: nowrap;}.box{display: flex;min-width: 1024px;max-width: 1920px;width: 100%;height:calc(100% - 1.11rem);margin: 0 auto;padding: 0.13rem;overflow: hidden;}.box .column{flex: 3;height: 100%;display: flex;flex-direction: column;}.box .column:nth-child(2){flex: 5;margin: 0 0.13rem;}.box .public{position: relative;height: 5.6rem;border: 1px solid rgba(25, 186, 139, 0.17);background:url(/static/images/bian.png)rgba(255, 255, 255, 0.04);padding: 0 0.2rem 0.53rem;margin-bottom: 0.2rem;width: 100%;}.box .public::before{position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content:"";}.box .public::after{position: absolute;top: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content:"";}.box .public .public-one{position: absolute;bottom: 0;left: 0;width: 100%;}.box .public .public-one::before{position: absolute;bottom: 0;left: 0;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content:"";}.box .public .public-one::after{position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content:"";}.box .public .chart-title{display: flex;justify-content: space-between;align-items: center;height: 0.54rem;margin-bottom: 0.1rem;}.box .public .chart-title h2{height: 0.6rem;line-height: 0.6rem;text-align: center;color: #fff;font-size: 0.35rem;font-weight: 400;margin: 0 auto;/* 水平居中 */flex: 1;}.box .public .chart-title .chart-tabs{display: flex;}.box .public .chart-title .chart-tabs .tab-btn{background:rgba(255, 255, 255, 0.1);border: 1px solid #02a6b5;color: #fff;padding: 0.05rem 0.15rem;margin-left: 0.1rem;cursor: pointer;font-size: 0.18rem;border-radius: 0.05rem;transition: all 0.3s;}.box .public .chart-title .chart-tabs .tab-btn:hover, .box .public .chart-title .chart-tabs .tab-btn.active{background: #02a6b5;color: #fff;}.box .public.bar h2{height: 0.6rem;line-height: 0.6rem;text-align: center;color: #fff;font-size: 0.35rem;font-weight: 400;margin: 0 auto;}.box .public .char{height: 3.9rem;margin-top: 0;width: 100%;}.num{background:rgba(101, 132, 226, 0.1);padding: 0.2rem;margin-bottom: 0.2rem;width: 100%;}.num .num-head{position: relative;border: 1px solid rgba(25, 186, 139, 0.17);width: 100%;}.num .num-head::before{position: absolute;top: 0;left: 0;content:'';width: 30px;height: 10px;border-top: 2px solid #02a6b5;border-left: 2px solid #02a6b5;}.num .num-head::after{position: absolute;bottom: 0;right: 0;content:'';width: 30px;height: 10px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;}.num .num-head ul{display: flex;width: 100%;}.num .num-head ul li{position: relative;flex: 1;line-height: 0.93rem;font-size: 0.8rem;color: aqua;text-align: center;font-family:'electronicFont';}.num .num-head ul li:first-child::after{content:'';position: absolute;top: 25%;right: 0;height: 50%;width: 1px;background:rgba(255, 255, 255, 0.2);}.num .num-body ul{display: flex;width: 100%;}.num .num-body ul li{flex: 1;text-align: center;color:rgba(255, 255, 255, 0.7);font-size: 0.24rem;height: 0.53rem;line-height: 0.53rem;padding-top: 0.13rem;}.sum{position: relative;height: 10.125rem;}.sum .map{position: absolute;top: 0;left: 0;z-index: 5;height: 7.125rem;background-size: 100% 100%;width: 100%;}.sum .rotate, .sum .hea, .sum .char-sum{position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);width: 5.475rem;height: 5.475rem;background-size: 100% 100%;opacity: 0.1;}.sum .hea{width: 6.0375rem;height: 6.0375rem;opacity: 0.9;animation: rotate 15s linear infinite;z-index: 2;background-size: 100% 100%;}.sum .char-sum{width: 6.075rem;height: 6.075rem;animation: rotate1 10s linear infinite;background-size: 100% 100%;}@keyframes rotate{from{transform:translate(-50%, -50%)rotate(0deg);}to{transform:translate(-50%, -50%)rotate(360deg);}}@keyframes rotate1{from{transform:translate(-50%, -50%)rotate(0deg);}to{transform:translate(-50%, -50%)rotate(-360deg);}}@media screen and(max-width: 1024px){html{font-size: 42px !important;}}@media screen and(min-width: 1920px){html{font-size: 80px !important;}}.num{display: flex;flex-direction: column;height: 100%;}.globe-container{flex: 2;position: relative;width: 100%;}#globe-canvas{width: 100%;height: 100%;display: block;}.globe-data{flex: 1;display: flex;flex-direction: column;justify-content: space-around;padding: 0.2rem 0;min-height: 120px;}.data-row{display: flex;width: 100%;}.data-item{flex: 1;text-align: center;}.data-value{font-family:'electronicFont';font-size: 0.45rem;color: #00f7ff;margin-bottom: 0.1rem;}.data-label{color:rgba(255, 255, 255, 0.7);font-size: 0.2rem;}@media(max-width: 768px){.data-value{font-size: 18px;}.data-label{font-size: 12px;}.data-row{gap: 10px;}}@media(max-width: 480px){.globe-data{padding: 5px 0;gap: 10px;}.data-value{font-size: 16px;}}3. view.js
// 柱状图模块(function(){const chartData ={classroom:{title:'教室每日用电量统计',data:{categories:['周一','周二','周三','周四','周五','周六','周日'],series:[{name:'早',data:[6.28,9.55,8.69,8.63,6.64,4.17,2.69]},{name:'晚',data:[5.71,8.65,5.32,5.91,5.77,3.17,1.85]}]},colors:['#5470C6','#91CC75']},lab:{title:'实验室每日用电量统计',data:{categories:['周一','周二','周三','周四','周五','周六','周日'],series:[{name:'早',data:[13.85,17.78,20.12,16.77,14.69,3.46,5.72]},{name:'晚',data:[9.05,11.72,14.37,11.42,11.62,3.17,5.63]}]},colors:['#EE6666','#FAC858']},dormitory:{title:'宿舍每日用电量统计',data:{categories:['周一','周二','周三','周四','周五','周六','周日'],series:[{name:'早',data:[4.23,3.98,4.56,4.01,4.34,2.78,2.45]},{name:'晚',data:[5.31,5.45,5.12,5.78,6.89,7.01,5.67]}]},colors:['#73C0DE','#3BA272']}};// 实例化对象 document.addEventListener('DOMContentLoaded',function(){var barChartDom = document.querySelector('.bar .char');var titleElement = document.querySelector('.bar .chart-title h2');var tabButtons = document.querySelectorAll('.bar .tab-btn');if(barChartDom && titleElement && tabButtons.length >0){var barChart = echarts.init(barChartDom);var currentType ='classroom';// 初始化图表functionupdateChart(type){const data = chartData[type].data;const colors = chartData[type].colors;const barOption ={color: colors,// 设置全局调色板title:{text: chartData[type].title,left:'center',textStyle:{fontSize:16,color:'#fff'},top:-3},tooltip:{trigger:'axis',axisPointer:{type:'shadow'}},legend:{data:['早','晚'],textStyle:{color:'#fff'},top:20},grid:{top:'20%',left:'3%',right:'4%',bottom:'3%',containLabel:true},xAxis:{type:'category',data: data.categories,axisLine:{lineStyle:{color:'#fff'}},axisLabel:{color:'#fff',interval:0}},yAxis:{type:'value',name:'用电量(千瓦)',nameTextStyle:{color:'#fff',padding:[0,0,0,30]},axisLine:{show:true,lineStyle:{color:'#fff'}},axisLabel:{color:'#fff'},splitLine:{lineStyle:{color:'rgba(255, 255, 255, 0.2)'}}},series:[{name:'早',type:'bar',barWidth:'30%',barGap:'50%',data: data.series[0].data,},{name:'晚',type:'bar',barWidth:'30%',data: data.series[1].data,}]}; barChart.setOption(barOption);}// 初始化显示教室数据updateChart(currentType);// 按钮点击事件 tabButtons.forEach(button=>{ button.addEventListener('click',function(){ tabButtons.forEach(btn=> btn.classList.remove('active'));this.classList.add('active');// 更新图表 currentType =this.dataset.type;updateChart(currentType);});}); window.addEventListener('resize',function(){ barChart.resize();});}});})();// 每日用水量统计(function(){// 数据配置const chartData ={classroom:{title:'教室每日用水量统计',data:{categories:['周一','周二','周三','周四','周五','周六','周日'],series:[{name:'早',data:[32.5,28.7,35.6,30.2,33.1,15.3,12.8]},{name:'晚',data:[28.4,31.2,26.8,29.5,18.7,8.2,6.5]}]},colors:['#5470C6','#91CC75']// 教室：早（蓝色）、晚（绿色）},lab:{title:'实验室每日用水量统计',data:{categories:['周一','周二','周三','周四','周五','周六','周日'],series:[{name:'早',data:[63.8,60.6,66.8,45.2,53.1,23.2,21.5]},{name:'晚',data:[25.7,27.6,23.4,35.7,35.8,16.5,21.1]}]},colors:['#EE6666','#FAC858']// 实验室：早（红色）、晚（黄色）},dormitory:{title:'宿舍每日用水量统计',data:{categories:['周一','周二','周三','周四','周五','周六','周日'],series:[{name:'早',data:[25.8,28.1,34.2,45.9,34.1,15.9,21.8]},{name:'晚',data:[34.4,26.7,33.3,29.1,15,6.6,7.1]}]},colors:['#73C0DE','#3BA272']// 宿舍：早（天蓝）、晚（深绿）}}; document.addEventListener('DOMContentLoaded',function(){if(typeof echarts ==='undefined'){ console.error('ECharts library is not loaded');return;}var chartDom = document.getElementById('vehicleChart');var titleElement = document.querySelector('.right-chart-module .chart-title h2');var tabButtons = document.querySelectorAll('.right-chart-module .tab-btn');if(chartDom && titleElement && tabButtons.length >0){ chartDom.classList.add('chart-container');try{var myChart = echarts.init(chartDom);var currentType ='classroom';// 初始化图表functionupdateChart(type){const data = chartData[type].data;const colors = chartData[type].colors;const option ={color: colors,title:{text: chartData[type].title,left:'center',textStyle:{fontSize:16,color:'#fff'},top:0},tooltip:{trigger:'axis',axisPointer:{lineStyle:{color:'#dddc6b'}},formatter:function(params){var result = params[0].axisValue +'<br/>'; params.forEach(function(item){ result += item.marker +' '+ item.seriesName +': '+ item.value +'千升<br/>';});return result;}},legend:{data:['早','晚'],textStyle:{color:'rgba(255,255,255,.5)',fontSize:12},top:25},grid:{top:'20%',left:'3%',right:'4%',bottom:'3%',containLabel:true},xAxis:{type:'category',boundaryGap:false,data: data.categories,axisLine:{lineStyle:{color:'rgba(255,255,255,.2)'}},axisLabel:{textStyle:{color:"rgba(255,255,255,.6)",fontSize:12}}},yAxis:{type:'value',name:'用水量(千升)',nameTextStyle:{color:'#fff',padding:[0,0,0,30]},axisTick:{show:false},axisLine:{lineStyle:{color:"rgba(255,255,255,.1)"}},axisLabel:{textStyle:{color:"rgba(255,255,255,.6)",fontSize:12}},splitLine:{lineStyle:{color:"rgba(255,255,255,.1)"}}},series:[{name:'早',type:'line',smooth:true,symbol:'circle',symbolSize:8,showSymbol:true,lineStyle:{width:2},areaStyle:{color:newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,color: colors[0]+'40'},{offset:0.8,color: colors[0]+'10'}],false),shadowColor:"rgba(0, 0, 0, 0.1)"},itemStyle:{color: colors[0],borderColor:"rgba(221, 220, 107, .1)",borderWidth:12},data: data.series[0].data },{name:'晚',type:'line',smooth:true,symbol:'circle',symbolSize:8,showSymbol:true,lineStyle:{width:2},areaStyle:{color:newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,color: colors[1]+'40'},{offset:0.8,color: colors[1]+'10'}],false),shadowColor:"rgba(0, 0, 0, 0.1)"},itemStyle:{color: colors[1],borderColor:"rgba(221, 220, 107, .1)",borderWidth:12},data: data.series[1].data }]}; myChart.setOption(option);}// 初始化显示教室updateChart(currentType);// 按钮点击事件 tabButtons.forEach(button=>{ button.addEventListener('click',function(){// 移除所有按钮的active类 tabButtons.forEach(btn=> btn.classList.remove('active'));// 给当前按钮添加active类this.classList.add('active');// 更新图表 currentType =this.dataset.type;updateChart(currentType);});}); window.addEventListener('resize',function(){ myChart.resize();});}catch(error){ console.error('Error initializing chart:', error);}}else{ console.error('Required DOM elements not found');}});})();// 饼图模块(function(){// 数据配置，添加早晚数据const pieData ={morning:[{value:30,name:"自行车"},{value:20,name:"步行"},{value:15,name:"出租车"},{value:25,name:"地铁"},{value:10,name:"大巴"}],evening:[{value:25,name:"自行车"},{value:25,name:"步行"},{value:20,name:"出租车"},{value:20,name:"地铁"},{value:10,name:"大巴"}]};// 颜色配置const colors =["#006cff","#60cda0","#ed8884","#ff9f7f","#32c5e9"];// 1. 实例化对象var myChart = echarts.init(document.querySelector(".pie .char"));// 当前显示的时间var currentTime ='morning';// 2. 指定配置项和数据functiongetOption(time){// 根据时间设置不同的标题const titleText = time ==='morning'?'上学交通工具次数统计':'放学交通工具次数统计';return{title:{text: titleText,left:'center',top:0,textStyle:{color:'#fff',fontSize:16}},legend:{top:"90%",itemWidth:10,itemHeight:10,textStyle:{color:"rgba(255,255,255,.5)",fontSize:"12"}},tooltip:{trigger:"item",formatter:"{a} <br/>{b} : {c} ({d}%)"},color: colors,series:[{name:"统计",type:"pie",radius:["10%","70%"],center:["50%","50%"],roseType:"radius",data: pieData[time],label:{fontSize:10},labelLine:{length:10,length2:15,// 延长引导线smooth:true// 平滑引导线},animationType:'scale',animationEasing:'elasticOut',animationDelay:function(idx){return Math.random()*200;}}]};}// 初始化图表functionupdateChart(time){ myChart.setOption(getOption(time));}// 初始加载updateChart(currentTime);// 添加按钮点击事件const tabButtons = document.querySelectorAll('.pie .tab-btn'); tabButtons.forEach(button=>{ button.addEventListener('click',function(){ tabButtons.forEach(btn=> btn.classList.remove('active'));this.classList.add('active'); currentTime =this.dataset.time;updateChart(currentTime);});}); window.addEventListener("resize",function(){ myChart.resize();});})();// 横向柱状图模块(function(){var myChart = echarts.init(document.getElementById("horizontalBarChart"));// 数据var data =[70,34,60,78,69];var titlename =["商学院","人工智能学院","法学院","医学院","计算机学院"];var valdata =[702,350,610,793,664];var myColor =["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"];// 配置项var option ={grid:{top:"10%",left:"22%",bottom:"10%",height:"90%"},xAxis:{show:false},yAxis:[{show:true,data: titlename,inverse:true,axisLine:{show:false},splitLine:{show:false},axisTick:{show:false},axisLabel:{color:"#fff",rich:{lg:{backgroundColor:"#339911",color:"#fff",borderRadius:15,align:"center",width:15,height:15}}}},{show:true,inverse:true,data: valdata,axisLabel:{textStyle:{fontSize:12,color:"#fff"}}}],series:[{name:"条",type:"bar",yAxisIndex:0,data: data,barCategoryGap:50,barWidth:10,itemStyle:{normal:{barBorderRadius:20,color:function(params){return myColor[params.dataIndex % myColor.length];}}},label:{normal:{show:true,position:"inside",formatter:"{c}%"}}},{name:"框",type:"bar",yAxisIndex:1,barCategoryGap:50,data:[100,100,100,100,100],barWidth:15,itemStyle:{normal:{color:"none",borderColor:"#00c1de",borderWidth:3,barBorderRadius:15}}}]};// 渲染图表 myChart.setOption(option);// 响应式调整 window.addEventListener("resize",function(){ myChart.resize();});})();//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`// 初始化3D地球functioninitGlobe(){// 创建场景、相机和渲染器const scene =newTHREE.Scene();const camera =newTHREE.PerspectiveCamera(75,1,0.1,1000);const renderer =newTHREE.WebGLRenderer({canvas: document.getElementById('globe-canvas'),antialias:true,alpha:true}); renderer.setSize(400,300);// 初始大小 renderer.setClearColor(0x000000,0);// 创建地球const geometry =newTHREE.SphereGeometry(5,64,64);const material =newTHREE.MeshPhongMaterial({color:0x156289,emissive:0x072534,shininess:5,transparent:true,opacity:0.8,wireframe:false});// 添加纹理const textureLoader =newTHREE.TextureLoader(); material.map = textureLoader.load('/static/images/img.png'); material.bumpMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg'); material.specularMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');const earth =newTHREE.Mesh(geometry, material); scene.add(earth);// 添加环境光和方向光const ambientLight =newTHREE.AmbientLight(0x333333); scene.add(ambientLight);const directionalLight =newTHREE.DirectionalLight(0xffffff,1); directionalLight.position.set(5,3,5); scene.add(directionalLight);// 设置相机位置 camera.position.z =12;// 动画循环functionanimate(){requestAnimationFrame(animate); earth.rotation.y +=0.002; renderer.render(scene, camera);}animate();// 响应式调整functionresizeGlobe(){const container = document.querySelector('.globe-container');const width = container.clientWidth;const height = container.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height);} window.addEventListener('resize', resizeGlobe);resizeGlobe();}// 加载Three.js并初始化if(typeofTHREE==='undefined'){const script = document.createElement('script'); script.src ='https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js'; script.onload = initGlobe; document.head.appendChild(script);}else{initGlobe();}4. jiazai.js
window.onload=function(){if(!sessionStorage.getItem('resourcesLoaded')){ sessionStorage.setItem('resourcesLoaded','true');const links = document.querySelectorAll('link[rel="stylesheet"]'); links.forEach(link=>{const newLink = link.cloneNode(); newLink.href = link.href +'?reload='+ Date.now(); link.parentNode.insertBefore(newLink, link.nextSibling);setTimeout(()=> link.remove(),300);// 平滑过渡});}};5. flexible.js
(functionflexible(window, document){var docEl = document.documentElement;var dpr = window.devicePixelRatio ||1;functionsetBodyFontSize(){if(document.body){ document.body.style.fontSize =12* dpr +"px";}else{ document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();functionsetRemUnit(){var rem = docEl.clientWidth /24; docEl.style.fontSize = rem +"px";}setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow",function(e){if(e.persisted){setRemUnit();}});if(dpr >=2){var fakeBody = document.createElement("body");var testElement = document.createElement("div"); testElement.style.border =".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody);if(testElement.offsetHeight ===1){ docEl.classList.add("hairlines");} docEl.removeChild(fakeBody);}})(window, document);
