要求：大屏数据页面，适配各种尺寸（不同宽高比）的PC显示屏，全屏之间有高度变化效果-屏幕和非全屏。并且有很多元素需要绝对定位。思路：将绝对元素包裹在一个div中，全部以px为单位，缩放缩放。使用的方法：vw,vh,vmin,vmax：相当于百分比，效果不是特别理想，设计稿的纵横比与每个屏幕的纵横比不同，图像可能变形或超出可视范围；rem：不理想，不能简单的依赖屏幕宽度，在宽度相同的情况下，高度变化要尽量充分；absolute+px+scale：通过计算视口的宽度和高度按比例缩放。implementjswindow.onload=function(){calScale();}window.addEventListener('resize',function(){calScale();//建议加个防抖})functioncalScale(){//容器要求的宽高constcontainerHeight=880,containerWidth=750;//头部导航letheader=document.querySelectorAll('.header')[0],container=document.querySelectorAll('.container')[0];让width=document.documentElement.clientWidth,height=document.documentElement.clientHeight,resetHeight=height-header.offsetHeight;让缩放；if(width>containerWidth){//当宽度足够时，根据高度缩放??zoom=(resetHeight/containerHeight).toFixed(2)}elseif(resetHeight>containerHeight){//当高度足够时，缩放根据宽度zoom=(width/containerWidth).toFixed(2)}container.style.transform='scale('+zoom+')'}
